Chrome Remote DevTools
  • English

      • 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

      bun run dev:server

      The server 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

      1. Open your web page with the client script loaded
      2. Open the Inspector in your browser (http://localhost:5173)
      3. Select your client from the list
      4. 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!

      Next Steps