launch_chromeLABSCO SUMMARY
Breakpoints are what separate this from a screenshot tool.
Most browser servers can click and read text. This one can stop execution on a DOM mutation, an XHR to a given path, or a named function, evaluate a condition before pausing, and hand back the call stack. Logpoints are the underused mode — set a condition and a message with pausing turned off and you get instrumented output without editing the source. Attaching to an already-running Electron app works the same way.
What it is
A Chrome DevTools Protocol client for AI-assisted front-end work. It launches Chrome or attaches to one that is already running — including Electron and other V8-based apps — and exposes inspection, execution and debugging.
What you get
- Connecting:
launch_chromestarts an instance with a debugging port,connect_remote_chromeattaches to a running one,list_available_targetsenumerates tabs with their WebSocket URLs, andconnect_websocket_urlswitches to a specific one - Inspection:
navigate_to,get_dom_treewith a depth limit,query_elementsby CSS selector,get_page_info,take_screenshotwith a full-page option - Diagnostics:
get_network_logswith URL filtering,get_console_logsfiltered by level,execute_javascriptin the page context - Source access:
get_script_sourceslists every loaded script,get_script_sourcefetches one,search_in_scriptssearches all of them for a function, class, variable or text, andget_page_functionslists what the page defines - Real debugging:
set_breakpointsupports DOM, event, function, XHR, line and logpoint types, with conditions and log messages, pluslist_breakpoints,remove_breakpoint,get_paused_info,resume_executionandstep_over close_chromeshuts the instance down
Requirements
Python 3.7+ and Google Chrome, on macOS, Linux or Windows. Clone the repository, install from requirements.txt and start python src/chrome_devtools_mcp.py; it serves MCP over SSE at http://localhost:12524/sse, and MCP_PORT and MCP_HOST change where it listens. Attaching to an existing app means starting it with a remote debugging port, conventionally 9222.
Setup effort
Build from source — git clone https://github.com/XRealSys/chrome-devtool-mcp.git
USE CASES
01
Finding out why a click does nothing
Break on the button, wait for the pause, and read the call stack and console output at that moment.
02
Checking what the page is actually requesting
Trigger the action and filter the network log to the endpoint you care about, request and response both.
03
Debugging an Electron app
Start it with a remote debugging port and attach — the same inspection and breakpoint tools apply.
04
Finding where a function is defined in bundled code
Search every loaded script for the name instead of guessing which bundle it landed in.
23 tools
Listed in project docs. Your client may show a different list.
connect_remote_chromeconnect_websocket_urllist_available_targetsnavigate_toget_dom_treequery_elementsget_network_logsget_console_logsexecute_javascripttake_screenshotget_page_infoget_script_sourcesget_script_sourcesearch_in_scriptsget_page_functionsset_breakpointlist_breakpointsremove_breakpointget_paused_inforesume_executionstep_overclose_chromeBEFORE YOU INSTALL
What to know first
Tools you get
23 tools named in the project's documentation.
Requires
Python 3.7+
Where it runs
The documented client runs the server on your machine.
INSTALLATION
Connect your client
This one is built from source rather than installed with a single command.
Server setup
TERMINAL
git clone https://github.com/XRealSys/chrome-devtool-mcp.git
cd chrome-devtool-mcp
python -m venv venv
source venv/bin/activate
pip install -r requirements.txtStart the server and leave it running — it listens on http://localhost:12524:
TERMINAL
python src/chrome_devtools_mcp.pyMCP Clients
Any MCP client
ANY MCP CLIENT · JSON
{
"mcpServers": {
"chrome-devtools": {
"url": "http://localhost:12524/sse"
}
}
}
