.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.
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
What’s the advantage of chrome devtools vs playwright mcp?
Faster, more capable. Reads the console logs, and can execute scripts. The long screenshots are great too
I used to use playwright but Chrome dev tools blew me away
At the project level, run:
claude mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latestThis 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.
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>&1At the project level, run:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latestThis configures the following project settings:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
}
}
}Follow the instructions in MCP Client configuration | ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents.