Chrome DevTools MCP × Cursor IDE — Guide & Starter

Make Cursor see your web app. This repo shows how to wire up the official Chrome DevTools MCP server to Cursor IDE so your AI assistant can debug live pages: inspect DOM, capture network traces, run Lighthouse, take screenshots, and more.

Why this repo?

Community projects like browser-tools-mcp proved Cursor can control a headless browser.
This guide integrates Chrome's official DevTools MCP server maintained by the Chrome DevTools team — unlocking full DevTools capabilities:

• ✅ DOM & styles inspection
• ✅ Console logs & JS errors
• ✅ Network waterfalls & timings
• ✅ Lighthouse & Core Web Vitals
• ✅ Accessibility (a11y) checks
• ✅ Screenshots, mobile emulation, visual diffs
• ✅ Headless mode & CI-friendly flags

TL;DR: This is true debugging, not just screenshots.

Quick Start

🚀 Easiest Install (Cursor does it for you)

If you're using Cursor IDE, you can simply ask Cursor to install & configure the Chrome DevTools MCP. Cursor will do the heavy lifting as long as you grant Full Disk Access (macOS) and provide the DevTools MCP package link.

Paste this in Cursor chat:

"Install the Chrome DevTools MCP and enable it for me.
Grant any required permissions.
Use the official package chrome-devtools-mcp and add it to my MCP servers.
If needed, update settings.json and restart Cursor."

• On macOS, ensure System Settings → Privacy & Security → Full Disk Access → Cursor = ON.
• Cursor will install the MCP and wire up your settings.json.
• You can immediately run DevTools commands (see prompts below).

Don't want to grant Full Disk Access? No problem — use the Manual Setup below.