@plutoxyz/devtools

A React component for embedding Chrome DevTools with UI control capabilities.

Features

• 🔗 WebSocket Connection: Connect to Chrome DevTools Protocol
• 🎛️ UI Controls: Hide/show sidebar and navigation elements
• 🤖 Auto-hiding: Automatically hide DevTools UI for clean interfaces
• 🔧 Configurable: Customizable DevTools base URL and behavior
• 📦 TypeScript: Full TypeScript support with comprehensive types

Installation

npm install @plutoxyz/devtools
# or
yarn add @plutoxyz/devtools
# or
pnpm add @plutoxyz/devtools

Quick Start

import React, { useRef } from "react";
import { BrowserView, BrowserViewRef } from "@plutoxyz/devtools";

function App() {
  const browserRef = useRef<BrowserViewRef>(null);

  const handleConnect = async () => {
    const wsUrl = "ws://localhost:9222/devtools/page/your-page-id";
    await browserRef.current?.connect(wsUrl);
  };

  const handleHideSidebar = async () => {
    await browserRef.current?.hideSidebar();
  };

  return (
    <div>
      <button onClick={handleConnect}>Connect</button>
      <button onClick={handleHideSidebar}>Hide Sidebar</button>

      <BrowserView
        ref={browserRef}
        onConnectionChange={(connected) => console.log("Connected:", connected)}
        onError={(error) => console.error("Error:", error)}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | -------------------- | ------------------------------ | --------------------------------------- | ------------------------------------------ | | wsUrl | string | undefined | WebSocket URL for Chrome DevTools Protocol | | devToolsBaseUrl | string | "https://browser-inspector.pluto.xyz" | Base URL for DevTools iframe | | autoHideSidebar | boolean | true | Auto-hide sidebar on connection | | autoHideNavigation | boolean | true | Auto-hide navigation on connection | | onConnectionChange | (connected: boolean) => void | undefined | Connection state callback | | onError | (error: string) => void | undefined | Error callback | | className | string | "" | Additional CSS class | | style | React.CSSProperties | {} | Inline styles |

Ref Methods

The component exposes methods via ref:

interface BrowserViewRef {
  showSidebar(): Promise<void>;
  hideSidebar(): Promise<void>;
  hideNavigationBar(): Promise<void>;
  showNavigationBar(): Promise<void>;
  toggleNavigationBar(): Promise<boolean>;
  connect(wsUrl: string): Promise<void>;
  disconnect(): void;
  isConnected(): boolean;
}

Advanced Usage

Manual Control

import { BrowserView } from "@plutoxyz/devtools";

<BrowserView
  wsUrl="ws://localhost:9222/devtools/page/123"
  autoHideSidebar={false}
  autoHideNavigation={false}
  devToolsBaseUrl="https://your-custom-devtools.com"
/>;

Requirements

• React 16.8+ (hooks support)
• Modern browser with WebSocket support
• Chrome/Chromium with debugging enabled

Chrome Setup

Launch Chrome with debugging enabled:

google-chrome --remote-debugging-port=9222 --disable-web-security --user-data-dir=/tmp/chrome-debug

License

MIT