浏览器活动记录器

DevTools MCP Logger

A Chrome/Firefox extension + MCP server that captures browser activity (network requests, console output, errors, page actions like clicks/inputs, 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 │               │               │
│  + action recorder│  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. Action recorder (TeachAnAgent-compatible) injects into recorded pages and captures clicks, inputs, form submits, scroll, key modifiers, and SPA navigations
3. Events are sent via HTTP to a local MCP server running on port 9223
4. MCP Server stores everything in memory and exposes it as MCP tools/resources
5. GitHub Copilot (or any MCP client) can query the captured data to understand page behavior and debug issues
6. Manual stop: Recording continues across page closes and new tabs until you click Stop (session data is cleared on stop / export lifecycle as configured)

Features

Chrome Extension (v1.6.0)

• Three recording modes per tab (page actions always included):
  • Logs — console, errors, performance, sources + actions
  • Network — HTTP traffic only (HAR-ready) + actions
  • Both — logs + network + actions
• Page actions — clicks, inputs, form submits, scroll, key modifiers, SPA navigation (same event shape as TeachAnAgent)
• Pause / Resume / Stop while attached (pause keeps debugger attached)
• Multi-tab capture until Stop — new pages, Smart Apply tabs, and popups join the same recording while the original page stays open; also continues after a page closes
• Skip analytics & tracking (default on): drops GA, ads, Hotjar, Facebook pixel, DoubleClick, etc. so exports stay useful for agents/CLIs
• Export capture as HAR, Markdown (.md), Text (.txt), or Actions JSON (TeachAnAgent-style). HAR also embeds _userActions
• Optional outputs (⚙): off by default
  • MCP endpoint
  • Hermes local bridge webhook
  • OpenClaw local bridge webhook
  • per-output URL + optional auth header saved locally
• Recording indicator — red REC badge, yellow PAUS when paused; on-page action indicator while recording
• Survives MV3 service-worker restarts while the debugger stays attached
• Log Journal window with filters (including Actions), search, copy, and multi-format export
• chrome.storage is used for saved endpoint settings, filters, live stats, and the last session snapshot

Firefox Extension (v1.6.0)

Same UX and exports as Chrome, adapted for Firefox WebExtensions:

• Network capture via webRequest + filterResponseData (Firefox has no Chrome-style CDP debugger attach)
• Console/errors via injected page hooks (content-logger.js)
• Page actions via the same TeachAnAgent-compatible recorder
• Multi-tab recording until Stop, Pause/Resume, noise filter, Journal, HAR/MD/TXT/Actions export
• Optional MCP / Hermes / OpenClaw webhook bridges
• Load unpacked from firefox-extension/ in about:debugging#/runtime/this-firefox → Load Temporary Add-on (select manifest.json)

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

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:

{
  "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

3b. Load Firefox Extension

1. Open Firefox and go to about:debugging#/runtime/this-firefox
2. Click Load Temporary Add-on…
3. Select firefox-extension/manifest.json
4. Pin the toolbar icon, open a normal http(s) page, then Activate Logs / Network / Both
5. For a permanent install, use the signed XPI/release ZIP from GitHub Releases after AMO signing (temporary add-ons reset when Firefox restarts)

4. Quick Launch (Alternative)

./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 MCP / Hermes / OpenClaw outputs under ⚙
2. Open any page → click the extension icon
3. Choose Logs, Network, or Both (actions are recorded in every mode)
4. Browse / click / type — use Pause to hold or Stop to detach
5. Export as HAR / Markdown / Text / Actions JSON (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