Debug frontend bugs with the Chrome DevTools MCP
Google's Chrome DevTools MCP gives Cursor a live Chrome instance — it can click, read the console, and pull network requests instead of guessing from screenshots.
- Type: Prompt
- Tags: Coding Agent Hacks, Intermediate, Cursor
- Updated: 2026-10-01
Prompt
Google's Chrome DevTools MCP gives Cursor a live Chrome instance — it can click, read the console, and pull network requests instead of guessing from screenshots. Frontend debugging in Cursor often hits a dead end: you paste an error, the agent tries to fix it, but it can't see the network tab, the console, or the actual UI. Wire up the Chrome DevTools MCP in Settings → MCP → New MCP Server, then ask Cursor to open the page and check itself. The agent navigates, clicks, and reads source-mapped stack traces to pinpoint the exact line. Implementation example: // In Cursor: Settings → MCP → New MCP Server { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } } // Then in chat: "My checkout button isn't firing. Open localhost:3000, click it, and tell me what's wrong."
More prompts
- Expense Report Automation System — Save More Time
- Meeting Scheduling Link Standardization — Save More Time
- Invoice Generation and Delivery Automation — Save More Time
- Document Template Automation Library — Save More Time
- Calendar Management Automation Rules — Save More Time
- File Organization and Naming System — Save More Time
- Recurring Payment Automation Setup — Save More Time
- Data Entry Elimination Framework — Save More Time