@thestarware/chrome-console-mcp

Chrome Console MCP Server

A Model Context Protocol (MCP) server that captures console logs from Chrome/Edge browsers via a browser extension and exposes them to MCP clients.

Architecture

Web Page Console → Chrome Extension → HTTP Bridge → MCP Server → MCP Client

Features

• Real-time Console Log Capture: Captures console.log, console.warn, console.error, etc.
• MCP Resources: Exposes logs as structured data via MCP protocol
• Search & Filter: Search logs by content, level, URL, and time range
• Export Options: Export logs in JSON, CSV, or text format
• Statistics: Get detailed statistics about captured logs
• Cross-browser: Works with Chrome and Edge

Installation

1. Install Dependencies

npm install

2. Build the Project

npm run build:all

3. Load Browser Extension

For Chrome:

1. Open Chrome and go to chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked" and select the dist/extension directory

For Edge:

1. Open Edge and go to edge://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked" and select the dist/extension directory

Usage

Start the MCP Server

# Start with default port (8765)
npm start

# Start with custom port
node dist/index.js --port 9000

Test with MCP Inspector

npm run inspector

Use the Chrome Extension

1. Open any webpage in Chrome
2. Open Developer Tools (F12)
3. Go to the "Console MCP" panel
4. Click "Start Capture" to begin capturing console logs
5. Console logs from the webpage will appear in the panel and be forwarded to the MCP server
6. Use the "Settings" button to configure the server port if needed
7. Use the "Filters" button to add custom console/network filters as needed

MCP Resources

• console://logs/all - All captured console logs
• console://logs/recent - Last 100 console logs
• console://stats - Statistics about captured logs

MCP Tools

• search_logs - Search logs by term, level, or URL
• export_logs - Export logs in various formats
• clear_logs - Clear all stored logs
• get_log_stats - Get log statistics
• get_server_info - Get server information including current port

Development

# Watch mode for TypeScript
npm run dev

# Build extension only
npm run extension:build

# Build everything
npm run build:all

Troubleshooting

Extension not connecting to MCP server

1. Ensure the MCP server is running: npm start
2. Check that the configured port (default 8765) is not blocked by firewall
3. Verify the extension is loaded in Chrome/Edge
4. Check the browser console for HTTP connection errors

Console logs not appearing

1. Make sure "Start Capture" is clicked in the DevTools panel
2. Check that console logs are actually being generated on the webpage
3. Look for errors in the browser console and DevTools panel console

File Structure

chrome-console-mcp/
├── src/                      # MCP server source code
│   ├── index.ts             # Main MCP server
│   ├── console-manager.ts   # Log management
│   ├── http-bridge.ts       # HTTP bridge (configurable port)
│   └── types.ts             # Type definitions
├── extension/               # Chrome extension
│   ├── manifest.json        # Extension manifest
│   ├── background.js        # Background script
│   └── devtools/           # DevTools panel
└── dist/                   # Built files