Chrome DevTools MCP Server connects an MCP-compatible coding agent to Chrome so it can interact with a live page and use DevTools capabilities for inspection, debugging, and performance workflows. To add it to Codex, run codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest in a terminal. The server starts Chrome when a browser-dependent tool is first used, not necessarily when the MCP connection is established.
What Chrome DevTools MCP Server does
Chrome DevTools MCP Server is an open-source Model Context Protocol server for connecting compatible AI coding agents to a live Chrome browser. Rather than asking an agent to infer what a web page does from source code alone, it can let the agent inspect and interact with a running page and use Chrome DevTools capabilities for debugging and performance work. Chrome presents it as part of its broader DevTools for agents offering, alongside a CLI and agentic skills.
Chrome for Developers describes the offering this way: “Chrome DevTools for agents is a suite of tools that brings the power of Chrome DevTools to your AI coding workflows.” The server is software installed through npm; it is not a Chrome extension or a separate physical device.
Set up Chrome DevTools MCP in Codex
The official Codex setup command is:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest- Install Node.js LTS and npm, and make sure a current stable version of Chrome is installed. The project lists these as requirements.
- Open a terminal in the environment where Codex is available and run the command above.
- Restart or refresh Codex’s MCP connections if necessary so it loads the new server configuration.
- Ask Codex to use a browser-dependent Chrome DevTools tool. The browser is launched when such a tool is first used; connecting the server alone does not necessarily open a Chrome window.
The @latest package tag follows the latest server release. That is convenient for setup, but means behavior and flags may change over time; check the official Chrome DevTools MCP repository and Chrome DevTools for agents documentation for current setup details.
Generic MCP configuration
For an MCP client that uses a command-and-arguments configuration, the documented launch command is:
npx -y chrome-devtools-mcp@latestConfigure the client to run npx with arguments -y and chrome-devtools-mcp@latest. The client’s configuration-file format and reload procedure depend on the client, so use its current MCP setup instructions for where to place those values.
Choose how the server runs Chrome
The server can use different browser and connection modes. Pick based on whether you need to watch the browser, whether you need an existing logged-in state, and how tightly you can control access to the browser.
| Mode | Useful when | Important consideration |
|---|---|---|
| Server-launched Chrome | You want the server to start a browser for the agent’s task. | The browser starts when a browser-dependent tool is first called. |
| Headless mode | You do not need to see the browser window, such as in an automated workflow. | Use the current configuration guide for the exact flag syntax supported by your installed version. |
Connect to an existing session with --autoConnect |
You want to use a running Chrome session and its current page or state. | The Chrome configuration guide states this option requires Chrome 144 or newer. An authenticated session exposes meaningful browser data to the agent. |
Connect using --browser-url |
You need to point the server at a browser debugging URL explicitly. | A reachable remote-debugging endpoint is a control surface for the browser; restrict who can reach it. |
The configuration guide also documents selecting a Chrome channel and controlling enabled tool categories. Exact option support is version-sensitive, so consult the current Chrome configuration guide rather than copying flags from an older example. A slim configuration is available for simpler browser tasks; choose it only if its reduced tool coverage suits the work.
Recommended Free Tools
Can it use your existing Chrome session?
Yes. The documented automatic connection option is --autoConnect; a manual connection can use --browser-url with a browser debugging URL. The automatic method is documented for Chrome 144 or newer in the configuration guide. Existing-session access can be convenient for pages that require sign-in, but it is not an isolated or risk-free setup: the agent may be able to see accounts, cookies, and other browser data.
- Use an existing authenticated session only with an agent and configuration you trust.
- Prefer a separate Chrome profile with limited accounts and data when the task does not require your everyday browsing session.
- If using remote debugging, do not expose its port to untrusted applications or networks. The advanced usage guide warns that any application able to reach the debugging port can control that browser.
For current details on connection flags and risk boundaries, see the repository’s advanced usage documentation.
Use the agent to inspect or debug a page
After the MCP server is configured, give the coding agent a concrete task tied to a page and an observable result. For example, ask it to open your local development page, identify why a navigation menu does not open at a desktop viewport, inspect the relevant console or page behavior, and report the likely cause before changing code. For performance investigation, ask it to inspect the live page and explain which evidence supports a suspected bottleneck.
Keep tasks bounded and verifiable: state the URL, the interaction or page state to examine, and what counts as success. An agent connected to a live browser can observe runtime behavior that static source review cannot show, but the available documentation does not establish a universal speedup or guarantee that an agent will diagnose a defect correctly. Review its findings and any proposed code changes.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Or skip the browser setup
If you need a screenshot rather than an agent-controlled debugging session, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP, or PDF. For example, with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for parameters and response details. It removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up free for 1,000 screenshots a month, no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting
Codex does not show the server or its tools
- Confirm the command was run in an environment where Codex is installed and available.
- Refresh or restart the client’s MCP connections after changing its configuration.
- Check that Node.js and npm are installed and usable from the same environment that launches the server.
- Try the documented generic launch command,
npx -y chrome-devtools-mcp@latest, in the client’s expected command-and-arguments format.
No Chrome window appears after connecting
This can be expected: the browser is started when a browser-dependent tool is first used, not necessarily at connection time. Ask the agent to perform a browser task. If it still cannot access Chrome, verify Chrome is installed and consult the current repository instructions for configuration and browser selection.
Automatic connection does not work
Check that the installed Chrome meets the documented Chrome 144-or-newer requirement for --autoConnect, and confirm Chrome is running as expected. If the automatic option is unsuitable, the configuration guide documents manual connection through --browser-url; configure the current version’s supported syntax and protect the debugging endpoint.
The agent cannot access a signed-in page
A server-launched browser may not share the state of your regular Chrome session. If the task genuinely requires your existing session, use a documented existing-session connection method and assess the trust implications first. Avoid granting an agent access to personal accounts or cookies just to simplify a test.
A copied flag or example is rejected
Flags can change as the package evolves, especially when using @latest. Compare your configuration with the current official configuration and advanced-usage guides. The launch article’s 2025 public-preview wording describes the launch at that time and should not be treated as a current status label.
Performance, reliability, and cost considerations
- Startup: Chrome is not necessarily launched when the MCP connection is made; browser-dependent work triggers startup. Account for that when designing an interaction or automation sequence.
- Configuration stability:
@latestreduces the work of choosing a release but tracks changing software. For a repeatable team workflow, validate configuration changes when updating the package. - Trust boundary: Existing-session and remote-debugging modes give the agent or reachable applications substantial browser control. Treat access to the profile and debugging port as sensitive.
- Measured outcomes: The official materials describe features and setup, but do not provide a named adoption statistic, independent performance benchmark, or quantified effectiveness result. Do not assume a particular time saving or diagnostic accuracy.
- Cost: The cited setup is open-source npm software; the official materials cited here do not state a usage fee for the server. Your own environment, hosting, and agent costs are separate considerations.
Frequently Asked Questions
Does Chrome DevTools MCP work with every AI coding agent?
It is designed for MCP-compatible clients; each client’s configuration and reload steps differ.
Is Chrome DevTools MCP a Chrome extension?
No. It is an npm-installed MCP server that connects a compatible agent to Chrome.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
