Chrome DevTools MCP: Letting AI Intelligentsia Control and Detect the Chrome Browser

Chrome DevTools MCP is an open source tool that acts as a server that allows AI programming assistants (such as Gemini, Claude, or Copilot) to directly control and inspect a running Google Chrome browser. This tool solves a core problem of AI programming assistants: they can write code, but they cannot see how the code actually runs in the browser, as if they were programming blindfolded. By using Model-Context-Protocol (MCP), the tool connects AI assistants to powerful Chrome developer tools, enabling AI to perform automated operations, deep debugging, and performance analysis. This means that the AI can not only generate code, but also test, inspect, and fix it in real-world environments, suggesting changes based on actual browser data, not just guesswork. Developers can do this with a simplenpxcommand to run it and configure it into a supported AI client.

Function List

• performance analysis: Use Chrome Developer Tools to document the performance trajectory of web pages and extract actionable insights for improvement.
• browser debugging:: Ability to analyze web requests, read browser console information, execute JavaScript scripts, and take screenshots of web pages.
• Reliable automation: Based on the Puppeteer library to automate the control of the Chrome browser, such as simulating user clicks, filling out forms, and page navigation, with the ability to automatically wait for actions to complete.
• Equipment Simulation: Supports simulation of different Central Processing Unit (CPU) performance and network conditions to facilitate testing of web page performance in different environments.
• Multi-client support: Can be integrated with a variety of AI programming assistant clients such as Claude, Cursor, Copilot in VS Code, and Gemini.

Using Help

Chrome DevTools MCP acts as a Model-Context-Protocol (MCP) server that provides AI programming assistants with the ability to control the Chrome browser. Below is a detailed process for installing and using the tool.

Environmental requirements

Before you begin, make sure your system meets the following conditions:

• Node.js 22 or later.
• Chrome Stable or newer.
• npm package manager.

Installation and startup

The easiest way to install and run it is through thenpxcommand, this command gets the latest package and executes it. You need to add the following configuration to the AI client that supports MCP:

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

utilizationchrome-devtools-mcp@latestIt is possible to ensure that your AI client is always using the latest version of the service.

Configuration for different AI clients

1. Claude Code
   Add the MCP server using Claude Code's command line tool:

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

2. Copilot / VS Code
   Follow the MCP installation guide to add the above standard configuration in VS Code. You can also use VS Code's command line tool to install it:

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

3. Cursor
   • Quick Installation: Click the "Install in Cursor" button in the Cursor software to install it.
   • manual installation:
     1. Enter the Cursor's Settings -> MCPThe
     2. strike (on the keyboard) New MCP ServerThe
     3. Paste in the standard JSON configuration provided above.
4. Gemini CLI or Gemini Code Assist
   Follow their official MCP configuration guide and use the standard JSON configuration provided above.

Core Function Operation

Once the server is configured, your AI programming assistant can invoke a series of tools to operate the browser. These tools are pre-defined commands, and the AI selects and executes them based on your natural language instructions.

• Page Navigation and Operation
  You can tell the AI to "open a new page and visit a specific URL" and the AI will call thenew_pagecap (a poem)navigate_pagetool. You can also have it "list all open tabs" (list_pages) or "Close current page" (close_page).
• Analog user input
  You can instruct the AI to "click a button on the page" (click) or "Fill in an input box with text" (fill). These operations rely on the Puppeteer implementation to reliably simulate real user behavior.
• performance analysis
  This is a core feature. You can ask the AI to "analyze the loading performance of the current page" and the AI will do the following in turn:
  1. invocations performance_start_trace The tool starts recording performance trajectories.
  2. Refreshes the page or performs the specified action.
  3. invocations performance_stop_trace End of record.
  4. invocations performance_analyze_insight Analyze the collected data and report to you in natural language about performance bottlenecks and optimization recommendations.
• adjust components during testing
  If you encounter a program error, you can ask the AI to "check the browser console for any error messages" and the AI will use thelist_console_messagestool to get logs. You can also have it "execute a script to get some data" (evaluate_script) or "Capture image of current page" (take_screenshot) for analysis.

Advanced Configuration

You can find more information on theargsAdd command line arguments to the array to further customize the server's behavior. For example, run in headless mode (without displaying the browser interface) and in a standalone ad hoc configuration:

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

The following are some common configuration parameters:

• --headless: Run Chrome in UI-less mode.
• --isolated: Creates a temporary user data directory each time it is run, which is automatically cleaned up when the browser is closed.
• --channel: Specify the Chrome version channel to use, such ascanary,betamaybedevThe
• --browserUrl: Connect to a Chrome instance that is already running via port forwarding.

To see all the configuration options available, you can run in the terminal npx chrome-devtools-mcp@latest --helpThe

application scenario

1. Automated front-end performance analysis
   AI intelligences can automatically open a specified web page, start a performance trace, perform a series of user actions, then stop the trace and analyze the results, and finally generate performance reports and optimization recommendations in human-readable language.
2. Automated Web Application Debugging
   When anomalies in site functionality are detected, developers can instruct the AI intelligences to reproduce the operation and check the console error logs, view network request failures, or execute specific JavaScript code to diagnose the root cause of the problem.
3. Regression testing and UI validation
   AI intelligences can automatically visit web pages, fill out forms, click buttons according to a preset process, and verify that the interface is consistent with expectations by comparing screenshots, thus realizing automated UI regression testing.
4. Web Data Capture and Processing
   By programmatically controlling the browser, the AI intelligences can navigate to the target page, extract information from the DOM, process the data, and return the results to the user for simple data crawling tasks.

QA

1. What is MCP?
   MCP stands for Model Context Protocol. It is an open standard for connecting large language models (LLMs) like Gemini or Claude with external tools and services. Chrome DevTools MCP is a server that implements this protocol and acts as an "adapter" between AI and Chrome Developer Tools.
2. Is this tool safe? What do I need to be aware of?
   The tool exposes the contents of the browser instance to the AI client, allowing the AI to inspect, debug or even modify any data in the browser. Therefore, you should avoid opening or manipulating web pages that contain sensitive or personal information in order to prevent information leakage to the AI client.
3. Why does startup fail in some clients?
   Some AI clients (such as those supporting macOS Seatbelt or Linux containers) will run the MCP server in a sandboxed environment. Since Chrome needs to create its own sandbox when it starts, this can lead to permission conflicts and startup failures. The workaround is to disable sandboxing restrictions for Chrome DevTools MCP in the AI client, or manually start a Chrome instance externally and use the--browserUrlparameter for the server to connect to it.