Quick Start

This guide will help you get started with Chrome Remote DevTools in just a few minutes.

Installation

Install Client Package

To use Chrome Remote DevTools in your web page, you need to install the client package:

npm

yarn

pnpm

bun

deno

npm install @ohah/chrome-remote-devtools-client

Start the Development Servers

1. Start the WebSocket Relay Server

Recommended method (for development convenience):

bun run dev:server

Direct Rust server execution:

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

Note: bun run dev:server is a wrapper script that runs the cargo command above for development convenience. The server is implemented in Rust and will start on http://localhost:8080 by default.

2. Start the Inspector (Web Version)

In a new terminal:

bun run dev:inspector

The Inspector will be available at http://localhost:5173 (or the port shown in the terminal).

3. Initialize the Client in Your Web Page

Using ESM module (TypeScript/React etc.):

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

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

Using script tag (IIFE):

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

Configuration Options

serverUrl: WebSocket server URL (use wss:// for HTTPS, ws:// for HTTP)
rrweb.enable: Enable session replay recording (optional, default: false)
rrweb.enableExportButton: Show export button on page (optional, default: false)
skipWebSocket: Skip WebSocket connection and use postMessage only (optional, default: false)

Your First Debugging Session

Open your web page with the client script loaded
Open the Inspector in your browser (http://localhost:5173)
Select your client from the list
Start debugging!

The Inspector will connect to your page and you can use all DevTools features:

View and interact with the console
Inspect the DOM
Monitor network requests
Debug JavaScript
And much more!

Quick Start (React Native)

This guide shows how to use Chrome Remote DevTools in React Native apps.

What you get

Console: console.log / warn / error in the DevTools Console tab, with object inspection
Network: fetch and XMLHttpRequest in the Network panel
Redux / Zustand: Same Redux DevTools UI as the Chrome Extension; works with Redux Toolkit and classic Redux
MMKV / AsyncStorage: Optional DevTools panels to view and edit storage
Components / Profiler / Performance: React DevTools component tree, profiler, and performance panels

For a full, friendly overview and example app, see the @ohah/chrome-remote-devtools-inspector-react-native README.

Installation

Install the React Native Inspector package:

npm

yarn

pnpm

bun

deno

npm install @ohah/chrome-remote-devtools-inspector-react-native

Metro Configuration

Add Redux DevTools Extension polyfill to your Metro configuration:

// 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);

Connect in Your App

Connect to the server from your React Native app:

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

// deviceId is required (shown in Inspector connection list)
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);
  });

Note: If using Android emulator, use 10.0.2.2 instead of localhost:

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

Device ID (required)

deviceId is required and is shown in the Tauri/Inspector connection list. For a stable device identifier across app restarts, install react-native-device-info and pass getUniqueId():

npm

yarn

pnpm

bun

deno

npm install react-native-device-info@15.0.1

import { getUniqueId } from 'react-native-device-info';

// Connect with stable device ID
const deviceId = await getUniqueId();
ChromeRemoteDevToolsInspector.connect('localhost', 8080, { deviceId });

With the Provider: pass deviceId (e.g. from getUniqueId()) so the same device is shown consistently in the Inspector list.

Complete example: Provider + stable device ID

Example that waits for getUniqueId() then renders the Provider (same pattern as the example app):

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 failed, using demo 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}
    >
      {/* Your app content */}
    </ChromeRemoteDevToolsInspectorProvider>
  );
}

deviceId is required; use react-native-device-info and pass getUniqueId() so the same device appears in the Inspector list across app restarts.

Using Redux DevTools (Optional)

If using Redux, add the middleware:

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'
    })
  )
);

Storage Inspection (Optional)

To inspect MMKV or AsyncStorage, register them:

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);

Your First Debugging Session

Start Chrome Remote DevTools server (bun run dev:server or cargo run --bin chrome-remote-devtools-server -- --port 8080)
Start Inspector web version (bun run dev:inspector)
Run your React Native app and connect to the server
Open Inspector in your browser (http://localhost:5173)
Select your client from the list
Start debugging!

The Inspector provides access to:

View and interact with the console
Monitor network requests
Debug JavaScript
Track Redux state and actions (if using Redux)
Inspect and modify MMKV/AsyncStorage (if registered)
And much more!

Next Steps

Learn about the Architecture
Try the Playground
Read the API Documentation
Explore React Native Custom CDP Domains

#Quick Start

#Installation

#Install Client Package

#Start the Development Servers

#1. Start the WebSocket Relay Server

#2. Start the Inspector (Web Version)

#3. Initialize the Client in Your Web Page

#Configuration Options

#Your First Debugging Session

#Quick Start (React Native)

#What you get

#Installation

#Metro Configuration

#Connect in Your App

#Device ID (required)

#Complete example: Provider + stable device ID

#Using Redux DevTools (Optional)

#Storage Inspection (Optional)

#Your First Debugging Session

#Next Steps

Quick Start

Installation

Install Client Package

Start the Development Servers

1. Start the WebSocket Relay Server

2. Start the Inspector (Web Version)

3. Initialize the Client in Your Web Page

Configuration Options

Your First Debugging Session

Quick Start (React Native)

What you get

Installation

Metro Configuration

Connect in Your App

Device ID (required)

Complete example: Provider + stable device ID

Using Redux DevTools (Optional)

Storage Inspection (Optional)

Your First Debugging Session

Next Steps