Content
# DevTools MCP Logger
A Chrome extension + MCP server that captures browser activity (network requests, console output, errors, DOM mutations, performance metrics), **exports network traffic as HAR**, and optionally exposes it to AI assistants via the Model Context Protocol (MCP).
## How It Works
```
┌─────────────────┐ HTTP (localhost:9223) ┌──────────────────┐ stdio ┌───────────────┐
│ Chrome Browser │ ──────────────────────────▶ │ MCP Server │ ◀──────────▶ │ VS Code / │
│ Extension │ POST /events │ (Node.js) │ MCP proto │ GitHub Copilot│
│ (debugger API) │ POST /meta │ In-memory store │ │ │
│ │ DELETE on page close │ │ │ │
└─────────────────┘ └──────────────────┘ └───────────────┘
```
1. **Chrome Extension** uses `chrome.debugger` API to attach to any tab and capture all CDP (Chrome DevTools Protocol) events
2. **Events are sent** via HTTP to a local MCP server running on port 9223
3. **MCP Server** stores everything in memory and exposes it as MCP tools/resources
4. **GitHub Copilot** (or any MCP client) can query the captured data to understand page behavior and debug issues
5. **Auto-cleanup**: When you close the monitored page, all session data is automatically cleared
## Features
### Chrome Extension (v1.3.0)
- **Three recording modes** per tab:
- **Logs** — console, errors, DOM, performance, sources
- **Network** — HTTP traffic only (HAR-ready)
- **Both** — logs + network
- **Pause / Resume / Stop** while attached (pause keeps debugger attached)
- Real-time capture of:
- **Network requests** (URLs, methods, status codes, headers, timing, bodies up to 256KB)
- **Console output** (log, warn, error, info with stack traces)
- **JavaScript errors** & exceptions
- **DOM mutations**, performance metrics, script sources
- **Export** capture as **HAR**, **Markdown (.md)**, or **Text (.txt)** (works offline / after stop)
- **MCP endpoint configuration** (⚙ in popup):
- Custom URL (localhost or remote)
- Auth: none, Bearer token, Basic, or custom header
- Host permission requested for non-localhost endpoints
- **Recording indicator** — red `REC` badge, yellow `PAUS` when paused
- **Log Journal** window with filters, search, copy, and multi-format export
- MCP server is optional — local recording/export works without it
### MCP Server
- Exposes tools for GitHub Copilot:
- `get_active_sessions` - List all monitored tabs
- `get_all_logs` - Get all captured data
- `get_session_logs` - Get logs for specific tab with category filter
- `get_errors` - Get only errors/exceptions
- `get_network_requests` - Get network activity
- `get_console_output` - Get console messages
- `clear_session` / `clear_all_sessions` - Manual cleanup
- Exposes resources:
- `chrome-devtools://overview` - Session overview
- `chrome-devtools://logs` - All logs
- `chrome-devtools://errors` - All errors
## Installation
### 1. Install MCP Server
```bash
cd mcp-server
npm install
```
### 2. Register MCP Server in VS Code
The MCP server is already configured in `~/.config/Code/User/mcp.json`. If you need to add it manually:
```json
{
"servers": {
"chrome-devtools": {
"type": "stdio",
"command": "node",
"args": ["/path/to/ChromiumDebuggingToMCP/mcp-server/server.js"]
}
}
}
```
### 3. Load Chrome Extension
1. Open Chrome and navigate to `chrome://extensions`
2. Enable "Developer mode" (toggle in top right)
3. Click "Load unpacked"
4. Select the `chrome-extension/` folder from this project
5. Click **Reload** after pulling updates
### 4. Quick Launch (Alternative)
```bash
./launch.sh
```
This starts the MCP server and launches Chrome with the extension pre-loaded.
## Usage
1. Optionally start the MCP server (`node mcp-server/server.js`) or configure a remote endpoint under ⚙
2. Open any page → click the extension icon
3. Choose **Logs**, **Network**, or **Both**
4. Browse / interact — use **Pause** to hold or **Stop** to detach
5. **Export** as HAR / Markdown / Text (also available from the Journal)
6. In VS Code, query the `chrome-devtools` MCP if the server is running
## Use with GitHub Copilot
In VS Code chat, you can now ask things like:
- "What errors are happening on my page?" (Copilot uses `get_errors` tool)
- "Show me the network requests that failed" (Copilot uses `get_network_requests`)
- "What's the console output?" (Copilot uses `get_console_output`)
## License
MIT
