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

      직접 Rust 서버 실행:

      cargo run --bin chrome-remote-devtools-server -- --port 8080 --host 0.0.0.0

      참고: bun run dev:server는 개발 편의를 위해 위의 cargo 명령어를 실행하는 래퍼 스크립트입니다. 서버는 Rust로 구현되어 있으며, 기본적으로 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 디버깅
      • 그리고 더 많은 기능!

      Quick Start (React Native)

      React Native 앱에서 Chrome Remote DevTools를 사용하는 방법입니다.

      제공 기능

      • 콘솔: DevTools Console 탭에서 console.log / warn / error 확인 및 객체 검사
      • 네트워크: Network 패널에서 fetch, XMLHttpRequest 추적
      • Redux / Zustand: Chrome Extension과 동일한 Redux DevTools UI, Redux Toolkit·클래식 Redux 지원
      • MMKV / AsyncStorage: 선택 사항으로 스토리지 조회·편집용 DevTools 패널
      • Components / Profiler / Performance: React DevTools 컴포넌트 트리, 프로파일러, 성능 패널

      더 친절한 소개와 예제 앱은 @ohah/chrome-remote-devtools-inspector-react-native README를 참고하세요.

      설치

      React Native Inspector 패키지를 설치합니다:

      npm
      yarn
      pnpm
      bun
      deno
      npm install @ohah/chrome-remote-devtools-inspector-react-native

      Metro 설정

      Metro 설정에 Redux DevTools Extension polyfill을 추가합니다:

      // metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withChromeRemoteDevToolsRedux } = require('@ohah/chrome-remote-devtools-inspector-react-native/metro');

const config = getDefaultConfig(__dirname);

module.exports = withChromeRemoteDevToolsRedux(config);

      앱에서 연결

      React Native 앱에서 서버에 연결합니다:

      import ChromeRemoteDevToolsInspector from '@ohah/chrome-remote-devtools-inspector-react-native';
import { getUniqueId } from 'react-native-device-info';

// deviceId는 필수 (Inspector 연결 목록에 표시됨)
const deviceId = await getUniqueId();
ChromeRemoteDevToolsInspector.connect('localhost', 8080, { deviceId })
  .then(() => {
    console.log('✅ Connected to Chrome Remote DevTools');
  })
  .catch((error) => {
    console.error('❌ Failed to connect:', error);
  });

      참고: Android 에뮬레이터를 사용하는 경우 localhost 대신 10.0.2.2를 사용하세요:

      const serverHost = Platform.OS === 'android' ? '10.0.2.2' : 'localhost';
const deviceId = await getUniqueId();
ChromeRemoteDevToolsInspector.connect(serverHost, 8080, { deviceId });

      Device ID (필수)

      deviceId는 필수이며 Tauri/Inspector 연결 목록에 표시됩니다. 앱 재시작 후에도 동일 기기 식별자를 유지하려면 react-native-device-info를 설치해 getUniqueId()를 넘기세요.

      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-device-info@15.0.1
      import { getUniqueId } from 'react-native-device-info';

// 안정적인 device ID로 연결
const deviceId = await getUniqueId();
ChromeRemoteDevToolsInspector.connect('localhost', 8080, { deviceId });

      Provider 사용 시: getUniqueId() 등으로 얻은 deviceId를 넘기면 Inspector 목록에서 같은 기기가 일관되게 표시됩니다.

      사용 예제: Provider + 안정적 device ID

      getUniqueId()를 받은 뒤 Provider를 렌더링하는 예제 (예제 앱과 동일한 패턴):

      import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator, Text } from 'react-native';
import { getUniqueId } from 'react-native-device-info';
import {
  ChromeRemoteDevToolsInspectorProvider,
  registerAsyncStorageDevTools,
  type AsyncStorageType,
} from '@ohah/chrome-remote-devtools-inspector-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

function App() {
  const [deviceId, setDeviceId] = useState<string | null>(null);

  useEffect(() => {
    getUniqueId()
      .then(setDeviceId)
      .catch((err) => {
        console.warn('getUniqueId 실패, 데모용 fallback 사용:', err);
        setDeviceId('demo-' + Date.now());
      });
  }, []);

  useEffect(() => {
    registerAsyncStorageDevTools(AsyncStorage as unknown as AsyncStorageType);
  }, []);

  if (deviceId === null || deviceId === '') {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
        <Text>Loading...</Text>
      </View>
    );
  }

  return (
    <ChromeRemoteDevToolsInspectorProvider
      serverHost="localhost"
      serverPort={8080}
      deviceId={deviceId}
    >
      {/* 앱 콘텐츠 */}
    </ChromeRemoteDevToolsInspectorProvider>
  );
}
      • deviceId는 필수이며, react-native-device-info의 getUniqueId()를 넘기면 앱 재시작 후에도 Inspector 목록에서 같은 기기로 표시됩니다.

      Redux DevTools 사용 (선택사항)

      Redux를 사용하는 경우 미들웨어를 추가합니다:

      import { createReduxDevToolsMiddleware } from '@ohah/chrome-remote-devtools-inspector-react-native/redux';
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  rootReducer,
  applyMiddleware(
    createReduxDevToolsMiddleware({
      name: 'MyApp',
      instanceId: 'main-store'
    })
  )
);

      스토리지 검사 (선택사항)

      MMKV 또는 AsyncStorage를 검사하려면 등록합니다:

      import { registerMMKVDevTools } from '@ohah/chrome-remote-devtools-inspector-react-native';
import { createMMKV } from 'react-native-mmkv';

const storage = createMMKV({ id: 'user-storage' });
registerMMKVDevTools(storage);
      import { registerAsyncStorageDevTools } from '@ohah/chrome-remote-devtools-inspector-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

registerAsyncStorageDevTools(AsyncStorage);

      첫 디버깅 세션

      1. Chrome Remote DevTools 서버 시작 (bun run dev:server 또는 cargo run --bin chrome-remote-devtools-server -- --port 8080)
      2. Inspector 웹 버전 시작 (bun run dev:inspector)
      3. React Native 앱 실행 및 서버에 연결
      4. 브라우저에서 Inspector 열기 (http://localhost:5173)
      5. 목록에서 클라이언트 선택
      6. 디버깅 시작!

      Inspector에서 다음 기능을 사용할 수 있습니다:

      • 콘솔 보기 및 상호작용
      • 네트워크 요청 모니터링
      • JavaScript 디버깅
      • Redux 상태 및 액션 추적 (Redux 사용 시)
      • MMKV/AsyncStorage 검사 및 수정 (등록한 경우)
      • 그리고 더 많은 기능!

      다음 단계