SPEEDYou commented this keyword
Chrome DevTools MCP
Google's MCP server that gives Claude Chrome DevTools: performance traces, network requests, console logs, screenshots and browser automation.
- Node.js LTS and npm
- Google Chrome (current stable)
- An MCP client such as Claude Code
- Setup
- 3 min
- Level
- Beginner
- Stars
- 53.0k
- License
- Apache-2.0
What it does
Chrome DevTools MCP is an MCP server. An MCP server is a connector that gives Claude new tools. This one lets Claude control and inspect a real Chrome browser with the same DevTools developers use.
Claude can record a performance trace and explain it, look at network requests, read console errors, take screenshots and click through pages.
Install it
- Make sure Node.js (LTS), npm and the current version of Google Chrome are installed.
- Add the config below to your MCP client.
- For the exact steps in Claude Code and other clients, open the Client Configurations Guide in the repo (docs/client-configurations.md).
- Restart your client so it picks up the new server.
Copy this
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Use it
- Try the first prompt below. Claude should open Chrome and record a performance trace.
- The browser starts only when Claude uses a tool that needs it, not when the server connects.
- Only need basic browsing? Add "--slim" and "--headless" to the args for a lighter setup.
First prompt
Check the performance of https://developers.chrome.com
Good to know
Claude can see and change anything in that browser, so avoid using it with sensitive or personal data.
Google collects usage statistics by default. Add --no-usage-statistics to the args to opt out. Performance tools may send trace URLs to Google's CrUX API; add --no-performance-crux to turn that off. Only Google Chrome and Chrome for Testing are officially supported.
Want the next one first?
One new guide a week, straight to your inbox.
