Who it is forA frontend developer whose agent keeps 'fixing' bugs it never actually saw in the browser.
The problemAgents edit code blind and claim a fix works without loading the page.
The outcomeAn agent that opens the page, reads console errors and failed requests, fixes the code and checks again.
What you need first
- Node.js and npm
- Chrome
- An MCP client or a coding agent that can run shell commands
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
Prompt for your agent
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.
Caveat. The server exposes everything in that browser to the MCP client; do not use a profile that is signed in to sensitive accounts.
Use this in your AI agent
Ask your agent
Using the Deduped MCP, get the setup steps for ChromeDevTools/chrome-devtools-mcp and "Let your coding agent debug a page in a real Chrome"
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 freeShare: X LinkedIn Hacker News Email Copy link
Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer