> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trace.probebrowser.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Extension

> AI-powered observability directly inside your browser.

The **Dev-Intelli Chrome Extension** (aka Trace) is a side-panel companion that gives you AI-powered observability directly inside your browser. It uses the Chrome DevTools Protocol (CDP) to inspect, debug, and fix pages in real-time.

## 🚀 Installation

*(Currently in Developer Preview)*

1. Download the `crx` or `zip` bundle.
2. Open `chrome://extensions`.
3. Enable **Developer Mode** (top right).
4. Drag and drop the file to install.

## 💻 The Side Panel Interface

Click the Trace icon on your toolbar to open the Side Panel.

### 1. Chat & AI Assistant

The core interface is a chat window. You can speak naturally or use commands.

* **Context Aware**: The AI knows the current URL, Console Errors, and Network status.
* **Slash Commands**:
  * `/debug`: Run a full page diagnostic.
  * `/network`: Analyze recent XHR/Fetch requests.
  * `/console`: Summarize error logs.
  * `/dom`: Analyze the current page structure.

### 2. Session Recording (RRWeb)

Trace can record your entire browsing session—mouse movements, DOM changes, and clicks—to help reproduce bugs.

* **Start**: Click the **Record** button.
* **Stop**: Click **Stop & Save**.
* **Replay**: Watch the session back pixel-perfectly with Session Replay.

### 3. Quick Actions (Chips)

One-tap access to common tasks:

* **Find Errors**: Instantly scans the console for exceptions.
* **Performance**: Checks Core Web Vitals (LCP, CLS).
* **Debug Page**: Runs the standard diagnostic workflow.

## ⚙️ Settings

Click the Gear Icon to configure:

* **API Key**: Connect your Trace Cloud account (required for AI analysis).
* **Power Mode**: Allow the extension to modify the page (auto-fix capability).

## 🔌 IDE Bridge

The extension can connect to your local VS Code / Cursor instance via `trace connect`.

1. Click **Connect IDE** in the top bar.
2. When connected, clicking an element in the browser will open the corresponding source file in your editor.

## 🛠️ Troubleshooting

* **"No page connected"**: Ensure you are on an active tab (not a `chrome://` page). Refresh the tab.
* **"Network not captured"**: Open the Side Panel *before* reloading the page to capture initialization requests.