Chrome Remote DevTools
  • 한국어

      • 빠른 시작

      이 가이드는 몇 분 안에 Chrome Remote DevTools를 시작하는 데 도움이 됩니다.

      설치

      클라이언트 패키지 설치

      웹 페이지에서 Chrome Remote DevTools를 사용하려면 클라이언트 패키지를 설치해야 합니다:

      npm
      yarn
      pnpm
      bun
      deno
      npm install @ohah/chrome-remote-devtools-client

      개발 서버 시작

      1. WebSocket 릴레이 서버 시작

      bun run dev:server

      서버는 기본적으로 http://localhost:8080에서 시작됩니다.

      2. Inspector (웹 버전) 시작

      새 터미널에서:

      bun run dev:inspector

      Inspector는 http://localhost:5173 (또는 터미널에 표시된 포트)에서 사용할 수 있습니다.

      3. 웹 페이지에서 클라이언트 초기화

      ESM 모듈 사용 (TypeScript/React 등):

      import { init } from '@ohah/chrome-remote-devtools-client';

init({
  serverUrl: 'ws://localhost:8080',
  rrweb: {
    enable: true,
    enableExportButton: true,
  },
});

      스크립트 태그 사용 (IIFE):

      <script src="http://localhost:8080/client.js"></script>
<script>
  ChromeRemoteDevTools.init({
    serverUrl: 'ws://localhost:8080',
    rrweb: {
      enable: true,
      enableExportButton: true,
    },
  });
</script>

      설정 옵션

      • serverUrl: WebSocket 서버 URL (HTTPS는 wss://, HTTP는 ws:// 사용)
      • rrweb.enable: 세션 리플레이 녹화 활성화 (선택사항, 기본값: false)
      • rrweb.enableExportButton: 페이지에 export 버튼 표시 (선택사항, 기본값: false)
      • skipWebSocket: WebSocket 연결 건너뛰고 postMessage만 사용 (선택사항, 기본값: false)

      첫 디버깅 세션

      1. 클라이언트 스크립트가 로드된 웹 페이지 열기
      2. 브라우저에서 Inspector 열기 (http://localhost:5173)
      3. 목록에서 클라이언트 선택
      4. 디버깅 시작!

      Inspector가 페이지에 연결되고 모든 DevTools 기능을 사용할 수 있습니다:

      • 콘솔 보기 및 상호작용
      • DOM 검사
      • 네트워크 요청 모니터링
      • JavaScript 디버깅
      • 그리고 더 많은 기능!

      다음 단계