Chrome Debug

An MCP server to allow you to debug webpages using LLMs

javascript

43

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "robertheadley-chrome-debug-mcp": {
      "command": "node",
      "args": [
        "path/to/chrome-debug-mcp/build/index.js"
      ],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

You can control Chrome with a Model Context Protocol (MCP) server that automates browser tasks, injects scripts, and manages extensions. This server lets you launch Chrome, interact with pages, intercept network requests, run Greasemonkey–style APIs, and collect visual outputs like screenshots, all through MCP clients.

How to use

You run the MCP server locally and connect your MCP client to send commands for browser automation. Typical workflows include launching Chrome with a target URL, opening and switching tabs, injecting userscripts, and intercepting or inspecting network requests. Use the server to automate repetitive tasks, collect screenshots, and perform cross-origin requests from scripts.

How to install

Prerequisites you need installed on your system:

Node.js 14 or higher
npm 6 or higher

Next, clone the MCP server repository, install dependencies, and build the project. Run the commands in sequence on your terminal.

git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp
npm install
npm run build

Configuration and run the server

Configure your MCP client to connect to the local server. The project demonstrates running the server locally with a standard Node execution. Use the following example configuration to register the MCP server in your client or integration tool.

{
  "mcpServers": {
    "chrome-debug": {
      "command": "node",
      "args": ["path/to/chrome-debug-mcp/build/index.js"],
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Usage patterns with the server

Launch Chrome and navigate to a URL, then create new tabs as needed.
Use Greasemonkey API equivalents to store values, inject styles, or perform cross-origin requests from your scripts.

Troubleshooting and notes

If you encounter startup or runtime issues, verify that Node and npm are correctly installed, that the build completed successfully, and that the path to the built server index file is correct in your configuration.

Available tools

launch_browser

Launch the browser and load a starting URL, with options to create and manage tabs.

create_tab

Open a new browser tab with a specified URL.

switch_tab

Switch focus to a different tab by index or ID.

gm_setValue

Store persistent key/value data accessible to scripts.

gm_getValue

Retrieve previously stored values by key.

gm_addStyle

Inject custom CSS into the current page.

gm_xmlhttpRequest

Make cross-origin requests from a userscript context.

intercept_requests

Intercept, block, modify, or log network requests.

screenshot

Capture full-page or element screenshots.

set_viewport

Set the browser viewport size and device emulation.

wait_for_selector

Wait for an element to appear or become visible.

click

Click on a page element by selector.

type

Type text into an input or editable element.

evaluate

Run JavaScript in the page context and return results.

get_console_logs

Retrieve or stream console output from the page.