DEDUPEDWhat do you want to do?
3 use cases
-
Let your coding agent debug a page in a real Chrome
Add the MCP server so the agent can open your app, read the console and network, and screenshot the result.
View prompt
Add ChromeDevTools/chrome-devtools-mcp to my MCP config, open http://localhost:<port>, list every console error and failed network request with its source-mapped stack, fix the top one, and take a screenshot after the fix.
-
Have an agent record a performance trace and explain it
Ask the agent to check a page's performance; it records a DevTools trace and pulls out actionable insights.
- REPO
ChromeDevTools/chrome-devtools-mcp - Claude Code
- Cursor
- Gemini CLI
- Software and DevOps
- Intermediate
View prompt
Using ChromeDevTools/chrome-devtools-mcp, record a performance trace of <url>, list the top 3 insights with their likely cause in my code, and re-measure after fixing the first one.
- REPO
-
Drive Chrome from the command line with the DevTools CLI skill
Use the CLI instead of MCP for quick navigate and screenshot jobs, and install it as a skill for your agent.
View prompt
Install ChromeDevTools/chrome-devtools-mcp globally, add the chrome-devtools-cli skill for my agent, and write a script that screenshots each URL in urls.txt into ./shots/.
Quick start with Chrome DevTools MCP
- Check you have what it needs: Node.js and npm; Chrome; An MCP client or a coding agent that can run shell commands.
- Open ChromeDevTools/chrome-devtools-mcp on GitHub and read the README and license.
- Add an mcpServers entry named chrome-devtools that runs npx with
chrome-devtools-mcp@latest - Restart your MCP client so the tools load
- Ask the agent to open your local app and report console messages and failed network requests
- Have it fix the cause and take a screenshot to confirm
These steps come from our top use case, Let your coding agent debug a page in a real Chrome, which also has a copy-paste agent prompt.
Use this in your AI agent
Ask your agent
Using the Deduped MCP, get the setup steps for ChromeDevTools/chrome-devtools-mcp
Add Deduped to Claude Code once
claude mcp add --transport http deduped https://dedupedai.com/mcp
Every Monday: the 5 hottest repos and exactly how to use them. Free, one email a week, unsubscribe anytime.
Get them freeChrome DevTools MCP alternatives · Best AI repos for Software and DevOps
About this repo
- Who it is forWeb developers who want their coding agent to see what the page actually does in Chrome instead of guessing from source.
- Why it is hot54k stars, talked about in 2 AI sources we track
- LanguageTypeScript
- Sourcegithub.com/ChromeDevTools/chrome-devtools-mcp · Back to Hot repos
Requirements
- Node.js and npm
- Chrome
- An MCP client or a coding agent that can run shell commands
Add this badge to your README
Maintain Chrome DevTools MCP? Show readers where to find these use cases. 
Markdown
[](https://dedupedai.com/use-cases/chromedevtools-chrome-devtools-mcp/?utm_source=github&utm_medium=badge&utm_campaign=ChromeDevTools-chrome-devtools-mcp)
HTML
<a href="https://dedupedai.com/use-cases/chromedevtools-chrome-devtools-mcp/?utm_source=github&utm_medium=badge&utm_campaign=ChromeDevTools-chrome-devtools-mcp"><img src="https://dedupedai.com/badge/ChromeDevTools/chrome-devtools-mcp.svg" alt="Use cases on Deduped" height="20"></a>
A static image, no tracking script. About the badge
Questions about Chrome DevTools MCP
What is Chrome DevTools MCP?
Chrome DevTools for agents (chrome-devtools-mcp) lets a coding agent such as Claude, Cursor, Copilot or Antigravity control and inspect a live Chrome browser, as an MCP server or as a CLI. The agent can record performance traces and get insights, read network requests and console messages with source-mapped stack traces, take screenshots, and automate pages with Puppeteer. The README warns that it exposes the browser's content to the MCP client, so avoid sensitive sites in that browser. It is an open-source project on GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp.
How do I use Chrome DevTools MCP?
Add an mcpServers entry named chrome-devtools that runs npx with chrome-devtools-mcp@latest; then Restart your MCP client so the tools load; ask the agent to open your local app and report console messages and failed network requests. The use cases on this page give the full steps and a copy-paste agent prompt for each job.
Who is Chrome DevTools MCP for?
Web developers who want their coding agent to see what the page actually does in Chrome instead of guessing from source.
What can I do with Chrome DevTools MCP?
3 use cases so far, for example: Let your coding agent debug a page in a real Chrome; Have an agent record a performance trace and explain it; Drive Chrome from the command line with the DevTools CLI skill. Each has steps and a copy-paste agent prompt.
What do I need to run Chrome DevTools MCP?
Node.js and npm; Chrome; An MCP client or a coding agent that can run shell commands.
What are alternatives to Chrome DevTools MCP?
Other hot AI repos in Software and DevOps: Deep Infer, Harness2, Orca, Opencode, Graphify.
Is Chrome DevTools MCP safe to run?
Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.