Chrome DevTools MCP server

I have recently been using Chrome DevTools MCP server (which I tend to call Chrome MCP) to work on personal projects, notably CALMe. In my first day of using MCP, I added Playwright MCP server to my .mcp.json. Both Playwright MCP and Chrome DevTools are MCP servers that work in similar ways, they give MCP clients (agentic CLI tools) various tools that give the ability to browse web pages, click on buttons, read console logs and even “see” how the web page looks by allowing the client to take screenshots/snapshots. Playwright MCP is based on the Playwright framework for Web Testing and Automation, and is developed by Microsoft. Chrome DevTools MCP is based on the world’s most popular browser, and specifically its DevTools, and is developed by Google. Two big tech giants, which means these MCPs are well developed.

The comment that prompted me to try Chrome DevTools MCP

While Playwright MCP was working okay for me, I saw that Chrome DevTools was released after and wondered if it’s any better.

A comment from this thread (which I also linked in Cool MCP Servers) prompted me to try it: What MCPs are you using with Claude Code right now? : r/ClaudeCode

Guide: Using Chrome DevTools MCP

Claude Code

At the project level, run:

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

This configures the following in the .mcp.json file:

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

Then simply open a new instance of claude and confirm that you trust the folder and MCP server. Run the /mcp slash command to verify that the MCP server appears as “✔ connected”.

To use the MCP server, I simply tell Claude something like “use chrome mcp to test and troubleshoot website x”. I would add more context depending on the specific task, but in general this is enough to let Claude know that it can use this MCP server.

Codex CLI

The Codex CLI sandbox makes working with Chrome DevTools MCP more challenging, though I managed to make it work (Source: Connecting to a running Chrome instance | ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents).

Run the following command:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browser-url="http://127.0.0.1:9222"

In addition, if live websites need to be tested, allow network access by adding the following lines to the global Codex config:

[mcp_servers.chrome-devtools] 
command = "npx" 
args = ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]

[sandbox_workspace_write] 
network_access = true 

Now, every time we want to use Codex CLI with Chrome DevTools MCP, we must first run this command in the background:

nohup /usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-headful --no-first-run --disable-gpu about:blank >/tmp/chrome-launch.log 2>&1

Gemini CLI

At the project level, run:

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

This configures the following project settings:

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

Other MCP clients

Follow the instructions in MCP Client configuration | ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents.

Featured image by Growtika on Unsplash.