Chrome Remote DevTools

한국어 | English

A remote debugging tool that uses Chrome DevTools Protocol (CDP) to control and debug remote Chrome browsers.

Overview

Chrome Remote DevTools enables remote debugging of web pages by implementing CDP on the client side and relaying messages through a WebSocket server. It provides a full-featured DevTools interface for debugging web applications remotely.

Features

• Connection Management: WebSocket connection to remote Chrome instances with automatic reconnection
• Page Control: Navigation and page information
• Console & Logging: Receive and display console messages, execute JavaScript
• Network Monitoring: Track network requests/responses, block and modify requests
• Storage Management: View and manage session storage, local storage, and cookies
• Session Replay: Record and replay user interactions and page changes
• Offline Logging: Capture and store logs locally for offline analysis
• Redux DevTools: Integrated Redux DevTools Extension with identical UI to Chrome Extension

Architecture

3-Tier Structure

[Target Web Page] ←→ [Bun Relay Server] ←→ [Inspector (Web/Desktop)]
    (client)            (server)              (inspector)

Package Structure

• @ohah/chrome-remote-devtools-server: WebSocket relay server (TypeScript/Bun)
• @ohah/chrome-remote-devtools-client: CDP client (JavaScript, loaded in web pages)
• @ohah/chrome-remote-devtools-inspector: Inspector UI (React + Vite, shared for web/desktop)

Data Storage

• IndexedDB: Used for offline logging and session replay data storage in the browser

Tech Stack

• Backend: Bun (TypeScript runtime), WebSocket (ws package)
• Frontend: React + Vite, TypeScript, Tauri (for desktop app)
• DevTools: devtools-frontend (Google open source, forked)
• Tools: oxlint/oxfmt, rustfmt/clippy, mise (tool version management)

Prerequisites

• Bun (latest)
• Rust (stable)
• mise (for tool version management)
• Git

Installation

1. Clone the repository

git clone https://github.com/ohah/chrome-remote-devtools.git
cd chrome-remote-devtools

2. Initialize the project

Run the initialization script to set up dependencies and reference repositories:

# Automatically detects OS and runs appropriate script
bun run init

# Or manually:
# Windows:
scripts\init.bat

# Linux/macOS:
bash scripts/init.sh

This will:

• Install Bun dependencies
• Install Rust dependencies
• Clone reference repositories (chii, chobitsu, devtools-remote-debugger, devtools-protocol, rrweb, redux-devtools)

3. Verify installation

# Check Bun version
bun --version

# Check Rust version
rustc --version

Usage

Development

Start the development servers:

# Start WebSocket relay server
bun run dev:server

# Start Inspector (web version)
bun run dev:inspector

# Start Inspector (desktop version with Tauri)
bun run dev:inspector:tauri

# Start documentation site
bun run dev:docs

Server Log Configuration

Server logs are disabled by default to reduce console noise. Enable them using environment variables:

# Enable all logs
LOG_ENABLED=true bun run dev:server

# Enable and filter logs by specific CDP methods
LOG_ENABLED=true LOG_METHODS=Runtime.consoleAPICalled,Network.requestWillBeSent bun run dev:server

Note: Logs are automatically disabled in production builds. See CONTRIBUTING.md for details.

Build

Build all packages:

# Automatically detects OS
bun run build

# Or manually:
# Windows:
scripts\build.bat

# Linux/macOS:
bash scripts/build.sh

Development Commands

# Development servers
bun run dev:server          # WebSocket server only
bun run dev:inspector       # Inspector web only
bun run dev:inspector:tauri  # Inspector desktop
bun run dev:docs            # Documentation site

# Code quality
bun run lint                # Run oxlint
bun run format              # Format with oxfmt
bun run format:rust         # Format Rust code with rustfmt

# Build
bun run build               # Build all packages
bun run build:devtools      # Build Redux DevTools plugin and devtools-frontend

Project Structure

chrome-remote-devtools/
├── packages/
│   ├── server/          # WebSocket relay server
│   ├── client/          # CDP client (for web pages)
│   └── inspector/       # Inspector UI (React + Vite, web/desktop)
├── document/            # RSPress documentation site
├── devtools/
│   └── devtools-frontend/  # DevTools frontend
└── reference/           # Reference code (gitignored)
    ├── chii/
    ├── chobitsu/
    ├── devtools-remote-debugger/
    ├── devtools-protocol/
    ├── rrweb/
    └── redux-devtools/  # Redux DevTools Extension source

Communication Flow

1. Client (client) connects to server via WebSocket
2. Inspector connects to server via WebSocket
3. Server relays CDP messages bidirectionally (proxy role)
4. Client implements CDP protocol on the client side

Contributing

We welcome contributions! Please see CONTRIBUTING.md for details.

• Code of Conduct
• Development Setup
• Commit Guidelines

License

MIT License - see LICENSE file for details.

Redux DevTools Integration

Chrome Remote DevTools includes a Redux DevTools panel that provides the same UI as the official Chrome Extension. The panel uses @redux-devtools/app for the UI and communicates via CDP protocol.

Building Redux DevTools

To build the Redux DevTools plugin and devtools-frontend:

bun run build:devtools

This will:

1. Build the @ohah/redux-devtools-plugin package
2. Build devtools-frontend with the Redux panel
3. Copy the built files to devtools/bundled/

Redux Panel

The Redux panel is available in the DevTools panel view. It uses:

• ReduxExtensionBridge: Manages CDP message buffering and forwarding to the plugin iframe
• CDP Events: Listens for Redux.message events (INIT, ACTION, STATE, etc.)
• @redux-devtools/app: Provides the Redux DevTools UI

React Native Integration

For React Native apps, use the middleware from @ohah/chrome-remote-devtools-react-native:

// Redux middleware
import { createReduxDevToolsMiddleware } from '@ohah/chrome-remote-devtools-react-native/redux';

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

// Zustand middleware
import { chromeDevtools } from '@ohah/chrome-remote-devtools-react-native/zustand';

const useStore = create(
  chromeDevtools((set) => ({ ... }), { name: 'MyStore' })
);

Redux actions and state changes are sent as CDP messages and displayed in the Redux panel.

References

This project is inspired by and references the following projects:

• devtools-remote-debugger - Client-side CDP implementation
• chii - Remote debugging tool using chobitsu
• chobitsu - CDP protocol JavaScript implementation library
• devtools-protocol - Official CDP definitions
• redux-devtools - Redux DevTools Extension source code

Screenshots

Welcome Screen

Client List

Console Panel

Network Panel

Application Panel

Session Replay Panel

Links

• Documentation
• Issues
• Discussions