npm package: @plutoxyz/devtools
Description: React component for embedding Chrome DevTools with UI control capabilities
Author: Pluto
Latest version: 1.0.0

# @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

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

## Quick Start

```tsx
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:

```tsx
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

```tsx
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:

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

## License

MIT