Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
If you already use Chrome DevTools, the chrome devtools mcp server is the piece that lets your assistant work with it directly. Google's official server lets coding agents drive and inspect a live Chrome instance — performance traces, network logs, console errors and Lighthouse audits.
Google's official server lets coding agents drive and inspect a live Chrome instance — performance traces, network logs, console errors and Lighthouse audits.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
navigate_page — Navigate the selected page to a URLnew_page — Open a new page or tablist_pages — List the pages currently open in the browserselect_page — Choose which open page subsequent tools act onclose_page — Close a pageclick — Click an element identified from a snapshotclick_at — Click at explicit coordinates on the pagedrag — Drag from one element to anotherhover — Hover over an elementfill — Fill a single form fieldfill_form — Populate multiple form fields in one calltype_text — Type text into the focused elementConfiguration is passed through the environment: CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS, CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
Node.js LTS, npm, and a current stable (or newer) build of Google Chrome or Chrome for Testing.
The server ships on npm as chrome-devtools-mcp, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.
This sits in the browser automation group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Chrome DevTools's toolset — navigate_page, new_page, list_pages and 33 more — is a fair guide to whether it matches your workflow. It is maintained by Chrome DevTools (Google) rather than a third party, which usually means auth handling and breaking changes are dealt with faster.
This entry was verified against Chrome DevTools's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
Record a trace on a real navigation, ask the agent which insight matters most, and have it point at the specific script or layout shift responsible.
Let the agent walk the steps, read the console with source maps applied, pull the failing request body, and correlate all of it with your codebase.
Run lighthouse_audit against a preview deployment and get a written summary of regressions before the PR is merged.
Capture heap snapshots before and after a suspect interaction, compare them, and inspect retaining paths without manually navigating the Memory panel.
| Tool | What it does |
|---|---|
| navigate_page | Navigate the selected page to a URL. |
| new_page | Open a new page or tab. |
| list_pages | List the pages currently open in the browser. |
| select_page | Choose which open page subsequent tools act on. |
| close_page | Close a page. |
| click | Click an element identified from a snapshot. |
| click_at | Click at explicit coordinates on the page. |
| drag | Drag from one element to another. |
| hover | Hover over an element. |
| fill | Fill a single form field. |
| fill_form | Populate multiple form fields in one call. |
| type_text | Type text into the focused element. |
| press_key | Send a keyboard key to the page. |
| upload_file | Attach a file to a file input. |
| handle_dialog | Accept or dismiss a native browser dialog. |
| wait_for | Wait until a condition on the page is met. |
| emulate | Emulate a device, network or CPU condition. |
| resize_page | Change the viewport size. |
| take_snapshot | Capture the accessibility tree as text for element targeting. |
| take_screenshot | Capture a screenshot of the page or an element. |
| screencast_start | Begin recording a screencast of the page. |
| screencast_stop | Stop the screencast recording. |
| list_network_requests | List network requests observed on the page. |
| get_network_request | Return full detail for a single network request. |
| list_console_messages | List console messages, including source-mapped stack traces. |
| get_console_message | Fetch one console message in detail. |
| evaluate_script | Run JavaScript in the page context. |
| performance_start_trace | Start recording a DevTools performance trace. |
| performance_stop_trace | Stop the trace and return the recorded data. |
| performance_analyze_insight | Explain a specific performance insight found in the recorded trace. |
| lighthouse_audit | Run a Lighthouse audit and return a structured report. |
| take_heapsnapshot | Capture a JavaScript heap snapshot. |
| compare_heapsnapshots | Diff two heap snapshots to find growth between them. |
| get_heapsnapshot_retainers | Show what is retaining an object in a heap snapshot. |
| install_extension | Install an unpacked Chrome extension into the controlled browser. |
| list_extensions | List extensions loaded in the browser. |
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Node.js LTS, npm, and a current stable (or newer) build of Google Chrome or Chrome for Testing.
| Variable | Description | Required |
|---|---|---|
| CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS | Set to disable Google's default collection of tool usage statistics. Collection is also disabled automatically when CI is set.e.g. 1 | Optional |
| CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS | Set to stop the server periodically checking npm for newer versions.e.g. 1 | Optional |
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.
Put 6,000+ pre-built scrapers at your assistant's fingertips through one MCP endpoint.