🚀 Installation
(Currently in Developer Preview)- Download the
crxorzipbundle. - Open
chrome://extensions. - Enable Developer Mode (top right).
- 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 viatrace connect.
- Click Connect IDE in the top bar.
- 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.

