debug-time-machine-cli

🚀 Debug Time Machine CLI - 완전 자동화된 React 디버깅 도구

설치

npm install -g debug-time-machine-cli
# 또는
npx debug-time-machine-cli

사용법

자동 시작 (권장)

# React 앱과 함께 Debug Time Machine을 자동으로 시작
debug-time-machine start-with-app "npm start"
debug-time-machine start-with-app "yarn dev"
debug-time-machine start-with-app "pnpm dev"

자동으로 실행되는 것들:

• ✅ 백엔드 서버 (포트 4000)
• ✅ Debug UI (포트 8080)
• ✅ 브라우저에서 Debug UI 열기
• ✅ 사용자 React 앱

개별 명령어

# Debug Time Machine 서버만 시작
debug-time-machine start --port 4000

# 프로젝트 초기화
debug-time-machine init --name my-app --template react

# 상태 기록
debug-time-machine record --output session.json --duration 300

# 기록 재생
debug-time-machine replay --input session.json --speed 2

단축 명령어

# dtm 별칭 사용 가능
dtm start-with-app "npm start"
dtm start
dtm init

명령어 옵션

start-with-app

debug-time-machine start-with-app <command> [options]

Options:
  --no-browser    Debug UI를 브라우저에서 자동으로 열지 않음

start

debug-time-machine start [options]

Options:
  -p, --port <port>    포트 번호 (기본값: 4000)
  -h, --host <host>    호스트 주소 (기본값: localhost)

init

debug-time-machine init [options]

Options:
  -n, --name <name>         프로젝트 이름
  -t, --template <template> 템플릿 (react, node, express)

예제

Create React App

debug-time-machine start-with-app "react-scripts start"

Vite

debug-time-machine start-with-app "vite --port 3000"

Next.js

debug-time-machine start-with-app "next dev"

package.json 스크립트

{
  "scripts": {
    "start": "react-scripts start",
    "debug": "debug-time-machine start-with-app 'react-scripts start'"
  }
}

그러면 다음과 같이 사용할 수 있습니다:

npm run debug