Chrome DevTools for agents is a suite of tools that brings the power of Chrome DevTools to your AI coding workflows. By installing Chrome DevTools for agents, you gain access to:
- MCP Server: Connects your AI agent to a live browser instance using the open-source Model Context Protocol.
- Chrome DevTools CLI: An interface to interact with the browser directly from your terminal.
- Agentic Skills: Expert instructions that teach your agent how to coordinate multiple tools for complex tasks like accessibility or performance debugging.
In the context of web development, Chrome DevTools for agents integrates debugging capabilities into your AI agent.
For example, an agent can use the tools to record and evaluate performance traces to analyze the performance of a website and identify potential improvements. Beyond web development, DevTools for agents also allows your agent to browse the live web instead of just retrieving static HTML.
Setup
This guide shows you how to set up Chrome DevTools for agents to help your coding agent control and inspect a live Chrome browser.
Use the chrome-devtools-mcp package to control and inspect a live
Chrome browser from your coding agent (such as Gemini, Claude, Cursor, or
Copilot). Note that while Chrome DevTools for agents provides the full suite of
tools, the CLI only supports a targeted subset for shell-based automation.
Supported IDEs and models
Chrome DevTools for agents supports any tool or IDE that supports the MCP protocol. This includes Antigravity, Gemini CLI, Claude Code, Cursor, Copilot, and more.
Security considerations
Because your agent will be able to view and interact with the pages it accesses, it can effectively act on your behalf if you connect it to a browser with an active, authenticated session. Avoid sharing sensitive or personal information that you don't want to share with agents.
Prerequisites
Before you install Chrome DevTools for agents, ensure your environment meets the following requirements:
To set up Chrome DevTools for agents, choose the method that matches your preferred coding environment. While some agents require manual installation, others come with the tools pre-integrated.
Antigravity
Chrome DevTools for agents comes pre-bundled with Antigravity 2.0. You can start using it immediately with the browser sub-agent. Try using a slash command such as:
/browser Navigate to the Google homepage
To access specialized agent skills, we recommend installing the DevTools plugin during the Build with Google step of the initial setup or within the application settings. For more information, check out the Antigravity Browser Subagent documentation.
Install using CLI
To set up Chrome DevTools for agents, you can use a JSON configuration file or a CLI command to install the server directly if your agent supports it. Some agents also offer official extensions or plugins that include agent skills, expert instructions that help your agent use DevTools features.
If your agent is not listed here, you can find how to install it in the Chrome DevTools for Agents GitHub repository.
To add Chrome DevTools for agents to a command-line agent, use the built-in CLI commands for your specific agent:
Gemini CLI
Install the Gemini CLI extension that includes the MCP package and the accompanying skills using the following command:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Install only the MCP package with the following command:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
To install Chrome DevTools for agents as a Claude Code Plugin use the following slash commands in Claude Code. Add the marketplace registry:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
And install the plugin from the marketplace registry:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
See the official Chrome DevTools Claude Plugin page for more information.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Install using JSON configuration
For other agents that support the mcpServers configuration key, manually add
this entry and make sure to install DevTools for agents through npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Install in other agents
To configure for an agent that is not listed, see the Chrome DevTools MCP GitHub repository.
Test your setup
Enter the following prompt in your agent to check if everything is working:
Check the performance of https://developers.chrome.com
Your agent should open a browser window and record a performance trace.
Troubleshoot your setup
If your agent fails to run tools and has access to Chrome DevTools skills, it might attempt to fix the problem automatically. If it doesn't, you can explicitly prompt the agent:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Or you can be more specific:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Advanced configuration
These are some other ways your agent can access the browser.
Configure headless mode
If you want to perform background tasks without a visible browser window, you
can run Chrome in headless (no UI) mode. Add the --headless flag to your
server arguments:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Connect to an existing browser session
By default, DevTools for agents starts a new Chrome instance. However, you can
connect your agent to an existing browser session using the --autoConnect
flag. This is particularly useful if your agent needs to investigate an issue
that is gated behind a sign-in or a session you've already started.
There are two ways to connect to an existing session:
Use automatic connection (Chrome 144+)
When the Chrome DevTools MCP server is configured with the --autoConnect
option, the MCP server will connect to an active Chrome instance and request a
remote debugging session.
- In your running Chrome browser, navigate to
chrome://inspect/#remote-debuggingto enable remote debugging. Update your MCP configuration to include the
--autoConnectflag:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Issue a prompt to your agent. Chrome will show a dialog asking for user permission to allow the remote debugging session. Click Allow.
Connect manually using remote debugging port
If you cannot use --autoConnect (for example, if you run your agent inside a
sandboxed environment), you can manually start Chrome with a debugging port.
Here's an example (on macOS):
Start the Chrome browser with the remote debugging port enabled. For security reasons, you must also specify a custom user data directory.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableConfigure your agent to connect using the
--browser-urlparameter:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }