Chrome Remote DevTools
  • English

      • Architecture Overview

      Chrome Remote DevTools uses a 3-tier architecture to enable remote debugging of web pages.

      3-Tier Structure

      Communication Flow

      Web Inspector

      Desktop Inspector (Tauri)

      Package Structure

      • chrome-remote-devtools-server (Rust): WebSocket relay server (standalone or embedded in Tauri)
      • @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)
      • src-tauri (Rust): Tauri desktop app (with embedded server)

      Data Storage

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

      Key Components

      Client

      The client implements CDP protocol on the client side, allowing web pages to be debugged remotely. It connects to the server via WebSocket and handles CDP commands and events.

      Server

      The server is a Rust-implemented WebSocket relay server. It acts as a relay between clients and inspectors, managing WebSocket connections and routing CDP messages bidirectionally. It can run as a standalone server or be embedded in a Tauri desktop app.

      Inspector

      The Inspector provides the DevTools UI for debugging. It can run as a web application or desktop application (using Tauri). In the desktop version, Tauri embeds the Rust server, allowing use without running a separate server.

      Next Steps