Chrome DevTools MCP: how to debug web pages with an AI agent

In this guide, you will see what the server offers, how to connect it to VS Code, and how to limit testing to pages without sensitive data.

O que é o Chrome DevTools MCP

Chrome DevTools for agents is Google's initiative to let agents interact with the browser and use Chrome DevTools features. The official repository distributes the MCP server and a CLI as well.

The tools reference includes navigation and form filling actions, reading the console and network requests, screenshots, Lighthouse audits, and performance tracing. Documented names include list_console_messages, list_network_requests, lighthouse_audit and performance_start_trace.

This does not turn the server into an autonomous agent: the model remains responsible for deciding which tools to call and interpreting what they return. DevTools provides structured access to the browser and inspection data.

Pré-requisitos

The project documentation recommends Node.js LTS and an up to date installation of Google Chrome. The package metadata specifies support for Node.js ^20.19.0, ^22.12.0 or >=23. The project officially supports stable Chrome and Chrome for Testing; other Chromium based browsers may work, but are not guaranteed.

For VS Code with Copilot, the maintainer recommended path is to install the plugin from the repository. Open the Command Palette, choose Chat: Install Plugin From Source and provide:

ChromeDevTools/chrome-devtools-mcp

This plugin bundles the MCP server and the skills that guide the agent. After installation, check the chat tools list. The official client configuration guide also documents alternatives for other editors and agents. In Codex CLI, for example, the repository recommends:

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

To first understand the general server configuration in VS Code, see our MCP in VS Code guide.

Faça uma inspeção sem alterar o projeto

Start with a public page or a test environment. The official documentation suggests requesting a performance analysis on https://developers.chrome.com. For example:

Open https://developers.chrome.com and run a Lighthouse accessibility audit. List the findings and indicate the observed evidence. Do not log in, do not navigate to other domains, and do not change files.

In your own application, replace the address with the staging environment. You can also ask the agent to list console messages, inspect network requests, or record a performance trace. The trace can include metrics such as LCP, INP and CLS; it is evidence of that navigation, not a guarantee that all application scenarios were covered.

The server documentation defines performance_start_trace to start recording and performance_stop_trace to stop it when automatic mode is not enabled. Read the command options before adapting the flow: by default, the tool may reload the page during collection.

Chrome DevTools MCP ou Playwright CLI?

They can complement each other. The Playwright CLI lets the agent drive the browser via terminal commands and walk through user flows. Chrome DevTools MCP exposes structured inspection and debugging tools, such as console, network, Lighthouse and performance traces.

To configure MCP servers in other contexts, also see the article on how to configure MCP in VS Code. After finding the problem, a code review with AI in VS Code flow helps review changes before merging them.

Privacy and security

The server can interact with pages, fill in fields and inspect browser content. The maintainer warns that the MCP client can access data from the browser instance; avoid personal accounts, private tabs and confidential information.

By default, the project reuses its own Chrome profile across runs. For isolated sessions, see option --isolated. If you connect the server to an already open instance via remote debugging, use a separate profile: the documentation warns that any local application with access to the debugging port can control the browser.

Usage statistics reporting is enabled by default. To disable it, use --no-usage-statistics or the CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS variable. Also check the repository security notices before connecting authenticated sessions.