chrome-devtools-mcp lets your coding agent (such as Gemini, Claude, Cursor or Copilot)control and inspect a live Chrome browser. It acts as a Model-Context-Protocol(MCP) server, giving your AI coding assistant access to the full power ofChrome DevTools for reliable automation, in-depth debugging, and performance analysis.

• Get performance insights: UsesChromeDevTools to recordtraces and extract actionable performance insights.
• Advanced browser debugging: Analyze network requests, take screenshots andcheck the browser console.
• Reliable automation. Usespuppeteer to automate actions inChrome and automatically wait for action results.

chrome-devtools-mcp exposes content of the browser instance to the MCP clientsallowing them to inspect, debug, and modify any data in the browser or DevTools.Avoid sharing sensitive or personal information that you don't want to share withMCP clients.

• Node.js v20.19 or a newerlatest maintenance LTS version.
• Chrome current stable version or newer.
• npm.

Add the following config to your MCP client:

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

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

[mcp_servers.chrome-devtools]command = "cmd"args = [    "/c",    "npx",    "-y",    "chrome-devtools-mcp@latest",]env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }startup_timeout_ms = 20_000

copilot

/mcp add

code --add-mcp'{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

Enter the following prompt in your MCP Client to check if everything is working:

Check the performance of https://developers.chrome.com

Your MCP client should open the browser and record a performance trace.

If you run into any issues, checkout ourtroubleshooting guide.

• Input automation (7 tools)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • upload_file
• Navigation automation (7 tools)
  • close_page
  • list_pages
  • navigate_page
  • navigate_page_history
  • new_page
  • select_page
  • wait_for
• Emulation (3 tools)
  • emulate_cpu
  • emulate_network
  • resize_page
• Performance (3 tools)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• Network (2 tools)
  • get_network_request
  • list_network_requests
• Debugging (4 tools)
  • evaluate_script
  • list_console_messages
  • take_screenshot
  • take_snapshot

The Chrome DevTools MCP server supports the following configuration option:

• --browserUrl,-uConnect to a running Chrome instance using port forwarding. For more details see:https://developer.chrome.com/docs/devtools/remote-debugging/local-server.

  • Type: string

• --headlessWhether to run in headless (no UI) mode.

  • Type: boolean
  • Default:false

• --executablePath,-ePath to custom Chrome executable.

  • Type: string

• --isolatedIf specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.

  • Type: boolean
  • Default:false

• --channelSpecify a different Chrome channel that should be used. The default is the stable channel version.

  • Type: string
  • Choices:stable,canary,beta,dev

• --logFilePath to a file to write debug logs to. Set the env variableDEBUG to* to enable verbose logs. Useful for submitting bug reports.

  • Type: string

• --viewportInitial viewport size for the Chrome instances started by the server. For example,1280x720. In headless mode, max size is 3840x2160px.

  • Type: string

• --proxyServerProxy server configuration for Chrome passed as --proxy-server when launching the browser. Seehttps://www.chromium.org/developers/design-documents/network-settings/ for details.

  • Type: string

• --acceptInsecureCertsIf enabled, ignores errors relative to self-signed and expired certificates. Use with caution.

  • Type: boolean

Pass them via theargs property in the JSON configuration. For example:

{"mcpServers": {"chrome-devtools": {"command":"npx","args": ["chrome-devtools-mcp@latest","--channel=canary","--headless=true","--isolated=true"      ]    }  }}

You can also runnpx chrome-devtools-mcp@latest --help to see all available configuration options.

chrome-devtools-mcp starts a Chrome's stable channel instance using the following userdata directory:

• Linux / macOS:$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows:%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

The user data directory is not cleared between runs and shared acrossall instances ofchrome-devtools-mcp. Set theisolated option totrueto use a temporary user data dir instead which will be cleared automatically afterthe browser is closed.

Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linuxcontainers. If sandboxes are enabled,chrome-devtools-mcp is not able to startChrome that requires permissions to create its own sandboxes. As a workaround,either disable sandboxing forchrome-devtools-mcp in your MCP client or use--connect-url to connect to a Chrome instance that you start manually outsideof the MCP client sandbox.

Chrome DevTools

ByChromeDevTools·9,645

Lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser.