click
Clicks on the provided element
LABSCO SUMMARY
A performance complaint can be reproduced and measured in one sitting.
It clicks through the flow, records a trace, then reads the insights back one at a time, so "the page feels slow" becomes an insight with a number attached. The heap tools go a step further and answer why the number keeps growing.
What it is
Google's own MCP server for Chrome DevTools. It automates the browser with Puppeteer and waits for actions to settle, then hands back what the DevTools panels would show: console messages with source-mapped stack traces, network requests, performance insights, Lighthouse results and heap snapshots. A CLI is included for use without MCP.
What you get
- Pages driven the way a person drives them: navigate, click, hover, drag, fill one field or a whole form at once, press keys, type, upload a file, handle a dialog and wait for text (
navigate_page,click,fill_form,wait_for,handle_dialog) - A text snapshot of the page taken from the accessibility tree, carrying the uid every interaction call takes (
take_snapshot) - Console messages and network requests listed since the last navigation, then fetched one at a time in full (
list_console_messages,get_console_message,list_network_requests,get_network_request) - A performance trace started and stopped, then read insight by insight (
performance_start_trace,performance_stop_trace,performance_analyze_insight) - A Lighthouse run — which deliberately leaves performance out, because that path is the trace (
lighthouse_audit) - Emulated conditions and several pages held open at once, selected between and closed (
emulate,resize_page,list_pages,new_page,select_page,close_page) - Heap debugging:
take_heapsnapshotis there without any flag, and--memoryDebuggingswitches on the rest of the thirteen-tool memory group — compare two snapshots, then walk summary, dominators, retainers, retaining paths, edges, class nodes and duplicate strings (compare_heapsnapshots,get_heapsnapshot_retaining_paths) - Further groups behind their own switches — Chrome extensions with
--categoryExtensions, progressive web apps with--categoryPwa, page-exposed tools with--categoryExperimentalThirdPartyand--categoryExperimentalWebmcp, coordinate clicking with--experimentalVision, and screencast recording with--experimentalScreencast, which also needs ffmpeg on the PATH - A
--slimmode at the other end of the scale, cutting the surface tonavigate,evaluateandscreenshot
Requirements
Node.js LTS, npm, and Chrome current stable or newer — Chrome and Chrome for Testing are the only officially supported browsers. npx -y chrome-devtools-mcp@latest is the whole install. It can also attach to a Chrome you are already running through --browserUrl or --wsEndpoint. Two things to decide before you wire it in: the server exposes whatever is in that browser to the client, so do not point it at a profile holding data you would not share; and usage statistics are collected by default, switched off with --no-usage-statistics or the CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS environment variable. Performance tools send trace URLs to the CrUX API unless you pass --no-performance-crux. Network access can be fenced with --allowedUrlPattern or --blockedUrlPattern.
Setup effort
One command — npx -y chrome-devtools-mcp@latest
USE CASES
01
Chasing down why a page feels slow
Drive the flow that feels slow, record a trace across it, then read the insights one at a time rather than staring at a flame chart. Lighthouse deliberately skips performance, so the trace is where the detail lives.
02
Reproducing a bug a user reported
Take a snapshot of the page from the accessibility tree, act on the elements by uid, then read the console back with its source-mapped stack traces. The reproduction and the evidence come from the same session.
03
Finding the request that returned the wrong data
List the network requests made since the last navigation, then pull the one you suspect in full — headers and body. Faster than reproducing it in a terminal with the right cookies.
04
Checking the page on a slow phone
Emulate the viewport, CPU throttling and network profile, then run the same flow. What breaks under throttling rarely breaks on a developer laptop, which is why the bug report and your experience disagree.
05
Tracking down a memory leak
Turn on --memoryDebugging, take a heap snapshot before and after the interaction, compare them, then walk the retaining paths on whatever grew. That is the chain that names the object holding the reference.
06
Running an accessibility and SEO pass before release
One Lighthouse run covers accessibility, SEO and best practices. Do it before the release rather than after somebody files it, and read the trace separately for the performance side.
07
Keeping the browser away from things it should not touch
Fence network access with allow or block URL patterns, and run isolated so the profile is a temporary one that is cleaned up afterwards. Worth setting before handing an agent a browser rather than after.
29 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
close_page
Closes the page by its index. The last open page cannot be closed.
drag
Drag an element onto another element
emulate
Emulates various features on the selected page.
evaluate_script
Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON, so returned values have to be JSON-serializable.
fill
Type text into an input, text area or select an option from a <select> element.
fill_form
Fill out multiple form elements (inputs, selects, checkboxes, radios) at once. ALWAYS prefer this tool over multiple individual 'fill' or 'click' calls when interacting with forms. It is significantly faster, more reliable, and reduces turn count. Example: Fill username, password, and check "Remember Me" in one call.
get_console_message
Gets a console message by its ID. You can get all messages by calling list_console_messages.
get_network_request
Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel.
handle_dialog
If a browser dialog was opened, use this command to handle it
hover
Hover over the provided element
lighthouse_audit
Get Lighthouse score and reports for accessibility, SEO, best practices, and agentic browsing. This excludes performance. For performance audits, run performance_start_trace
list_console_messages
List all console messages for the currently selected page since the last navigation.
list_network_requests
Lists the most recent requests for the currently selected page since the last navigation.
list_pages
Get a list of pages open in the browser.
navigate_page
Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.
new_page
Open a new tab and load a URL. Use project URL if not specified otherwise.
performance_analyze_insight
Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the results of a trace recording.
performance_start_trace
Start a performance trace on the selected webpage. Use to find frontend performance issues, Core Web Vitals (LCP, INP, CLS), and improve page load speed.
performance_stop_trace
Stop the active performance trace recording on the selected webpage.
press_key
Press a key or key combination. Use this when other input methods like fill() cannot be used (e.g., keyboard shortcuts, navigation keys, or special key combinations).
resize_page
Resizes the selected page's window so that the page has specified dimension
select_page
Select a page as a context for future tool calls.
take_heapsnapshot
Capture a heap snapshot of the currently selected page. Use to analyze the memory distribution of JavaScript objects and debug memory leaks.
take_screenshot
Take a screenshot of the page or element.
take_snapshot
Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected in the DevTools Elements panel (if any).
type_text
Type text using keyboard into a previously focused input
upload_file
Upload a file through a provided element.
wait_for
Wait for the specified text to appear on the selected page.
BEFORE YOU INSTALL
What to know first
Tools you get
29 tools when we connected. The documentation lists 57; the rest register only with flags such as --memoryDebugging, --categoryExtensions and --categoryPwa. The --slim option instead exposes just three differently named tools: navigate, evaluate and screenshot.
Requires
npx on PATH
CONTEXT COST
Moderate Standing cost
Rated by the size of the 29 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Server setup
TERMINAL
npx -y chrome-devtools-mcp@latestMCP Clients
Amp
AMP · JSON
{
"amp.mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}Bob, Cline, Cursor, JetBrains IDEs, Kiro, Qoder, Visual Studio, Warp, Windsurf
JSON
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}VS Code
VS CODE · JSON
{
"servers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}Antigravity
ANTIGRAVITY · JSON
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}This connects to the browser Antigravity is using; it will not start that browser for you. If the browser is not already running, start it first by clicking the Chrome icon at the top right corner. If you are not using port 9222, adjust the URL accordingly.
Claude Code
CLAUDE CODE · TERMINAL
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestClaude Code — plugin
Add the marketplace registry in Claude Code: /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Install the plugin: /plugin install chrome-devtools-mcp@chrome-devtools-plugins
Restart Claude Code so the MCP server and skills load; check with /skills. If you installed Chrome DevTools MCP for Claude Code before, remove that first.
Codex
CODEX · TERMINAL
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latestCodex — Windows
CODEX — WINDOWS · TOML
[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
startup_timeout_ms = 20000
[mcp_servers.chrome-devtools.env]
SystemRoot = "C:\\Windows"
PROGRAMFILES = "C:\\Program Files"Command Code
COMMAND CODE · TERMINAL
cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestGitHub Copilot
Start Copilot CLI: copilot
Open the dialog to add a new MCP server: /mcp add
Enter Server name chrome-devtools, Server Type [1] Local and Command npx -y chrome-devtools-mcp@latest, then press CTRL+S to save
GITHUB COPILOT
chrome-devtoolsVS Code — Windows Powershell
For Windows (PowerShell):
VS CODE — WINDOWS POWERSHELL · TERMINAL
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'Devin CLI
DEVIN CLI · TERMINAL
devin mcp add chrome-devtools -- npx chrome-devtools-mcp@latestFactory CLI
FACTORY CLI · TERMINAL
droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"Gemini CLI
GEMINI CLI · TERMINAL
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latestGrok Build CLI
GROK BUILD CLI · TERMINAL
grok mcp add chrome-devtools npx chrome-devtools-mcp@latestKatalon Studio
KATALON STUDIO · TERMINAL
mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latestMistral Vibe
Add in ~/.vibe/config.toml:
MISTRAL VIBE · TOML
[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]OpenCode
OPENCODE · JSON
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"chrome-devtools": {
"type": "local",
"command": [
"npx",
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}Qoder CLI
QODER CLI · TERMINAL
qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
