Chrome DevTools MCP Server

What the Chrome DevTools MCP server does

How models use it and what it is built for.

The gap this closes is verification. An agent can generate a fix for a slow page, but without DevTools it has no way to know whether the fix worked — it is reasoning about performance from source code alone. This server gives it measurement: performance_start_trace and performance_stop_trace record a real trace, and performance_analyze_insight pulls out specific findings like a long task or a render-blocking resource rather than dumping raw timings. Around that sits the rest of DevTools: list_network_requests and get_network_request for loading failures and API calls, list_console_messages and get_console_message for JavaScript errors with source maps applied, get_css_styles for computed styles, evaluate_script to run arbitrary JavaScript in the page, and lighthouse_audit for a full report. Because it is built on Puppeteer, the agent can also drive the page — click, fill a form, navigate, handle a dialog — so it can reproduce a bug and then inspect the result. A --slim flag trims the tool list when the full set is more than the model needs.

Tools the Chrome DevTools MCP server exposes

Typical tools an AI model can call. Exact names vary by version.

• performance_start_trace / performance_stop_trace / performance_analyze_insight — record a trace and extract findings
• list_network_requests / get_network_request — debug failed loads, slow resources and API calls
• list_console_messages / get_console_message — JavaScript errors with source-mapped stack traces
• lighthouse_audit — run a full Lighthouse report against the page
• navigate_page / new_page / list_pages / select_page / wait_for — drive navigation across tabs
• click / fill / fill_form / hover / press_key / type_text / upload_file — interact with the page
• take_screenshot / take_snapshot / screencast_start — capture what the page actually looks like
• evaluate_script / get_css_styles — run JavaScript and read computed styles
• emulate / resize_page — throttle CPU and network, or test a viewport size

Connecting to Chrome DevTools

Taken from the official Chrome DevTools documentation — see ChromeDevTools/chrome-devtools-mcp — official repository for the full reference.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated", "--headless"]
    }
  }
}

Example prompts to try

Copy any of these into MCP Agent Studio after connecting.

• Load this page, record a performance trace and tell me what is blocking the largest contentful paint.

• Open the checkout flow, fill the form and show me any console errors it throws.

• Which network requests on this page take longest, and which are render-blocking?

• Run a Lighthouse audit and list the three changes with the biggest impact.

Models on MCP Playground

This is not a single-model product: you get the same MCP connection with 60+ models (Claude, GPT, Gemini, DeepSeek, open-weight, and more), you can switch mid-conversation, and you can open Compare mode to run the same prompt against multiple models at once. The card above is a suggested starting point for this server — not the only choice.

Check an AI agent can actually use the Chrome DevTools MCP server

Listing tools proves the server is reachable, not that a model can work with it. Evals go further: they read every tool on the server, write a test suite from its real schemas, and run it — code decides pass/fail on the responses (schema conformance, error codes, pagination, result caps) while a scoring model grades plain-English tasks driven through the tools.

Chrome DevTools MCP server — FAQ

Common questions about connecting, scoping and using it safely.