{
 "schema_version": 1,
 "generated": "2026-10-25",
 "id": "chromedevtools-chrome-devtools-mcp--let-your-agent-debug-a-page-in-real-chrome",
 "repo": "ChromeDevTools/chrome-devtools-mcp",
 "repo_url": "https://github.com/ChromeDevTools/chrome-devtools-mcp",
 "repo_slug": "chromedevtools-chrome-devtools-mcp",
 "title": "Let your coding agent debug a page in a real Chrome",
 "page_title": "How to let your coding agent debug a page in a real Chrome with Chrome DevTools MCP",
 "summary": "Add the MCP server so the agent can open your app, read the console and network, and screenshot the result.",
 "who": "A frontend developer whose agent keeps 'fixing' bugs it never actually saw in the browser.",
 "problem": "Agents edit code blind and claim a fix works without loading the page.",
 "outcome": "An agent that opens the page, reads console errors and failed requests, fixes the code and checks again.",
 "steps": [
  "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"
 ],
 "agent_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.",
 "agents": [
  "claude-code",
  "cursor",
  "gemini-cli"
 ],
 "difficulty": "Beginner",
 "time": "10 minutes",
 "basis": "readme",
 "caveat": "The server exposes everything in that browser to the MCP client; do not use a profile that is signed in to sensitive accounts.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "requirements": [
  "Node.js and npm",
  "Chrome",
  "An MCP client or a coding agent that can run shell commands"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": true,
 "score": 1.0,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/chromedevtools-chrome-devtools-mcp/let-your-agent-debug-a-page-in-real-chrome/",
 "md": "https://dedupedai.com/use-cases/chromedevtools-chrome-devtools-mcp/let-your-agent-debug-a-page-in-real-chrome/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/chromedevtools-chrome-devtools-mcp--let-your-agent-debug-a-page-in-real-chrome.json",
 "api_version": "v1"
}