Cursor Browser Inspector

Give Cursor AI direct access to Chrome DevTools. Automatically capture console logs, network requests, and errors for 10x faster debugging.

🎯 The Problem

Debugging with AI assistants usually requires:

1. ❌ Opening DevTools manually
2. ❌ Copying console errors
3. ❌ Copying network requests
4. ❌ Pasting everything to Cursor
5. ❌ Repeating for every issue

This is slow, tedious, and breaks your flow.

✨ The Solution

With Cursor Browser Inspector:

1. ✅ Run one command
2. ✅ Cursor automatically fetches all debugging data
3. ✅ Get instant, context-aware solutions

Debug 10x faster with zero manual work.

🚀 Quick Start

Step 1: Install

Install from VS Code Marketplace or download .vsix from releases.

Step 2: Initialize (First time only)

1. Open any project in Cursor
2. Click "Initialize" when prompted
3. Creates .cursor/rules/cdp-debug.md with AI instructions

Step 3: Connect

Run command: CDP: Open Chrome With Cursor Connection

This automatically:

• 🌐 Launches Chrome with debugging enabled
• 🔧 Starts MCP + HTTP servers
• 🔗 Connects to Chrome DevTools Protocol
• 📊 Begins capturing all debugging data

Step 4: Optional - Enable MCP for Best Experience

Run command: CDP: Copy MCP Configuration

1. Configuration copies to clipboard automatically
2. Open ~/.cursor/mcp.json (create if doesn't exist)
3. Paste the configuration inside "mcpServers": { }
4. Restart Cursor

With MCP: Cursor uses native tools (cleaner, faster) Without MCP: Cursor uses HTTP API (works great too!)

Step 5: Debug

Use your app in the debug Chrome, then ask Cursor:

• "Check for console errors"
• "Show recent network requests"
• "Why is my API call failing?"
• "Find slow requests"

Cursor automatically fetches the real browser data!

🎬 See It In Action

Before:

Developer: "My login is broken"
→ Open DevTools
→ Copy error: "TypeError: Cannot read property 'token' of undefined"
→ Paste to Cursor
→ Copy network request
→ Paste to Cursor
→ Wait for analysis...

After:

Developer: "My login is broken"
→ Cursor automatically analyzes:
   • Console errors
   • API requests/responses  
   • Timing and status codes
→ Cursor: "The login fails with 401 Unauthorized, but there's also 
   a JavaScript error at login.js:45 trying to read 'token' from an 
   undefined response. The API expects 'email' but you're sending 
   'username'. Here's the fix..."

From 2 minutes of manual work to instant AI-powered insights. ⚡

💡 Key Features

🤖 Dual Protocol Support

• MCP (Model Context Protocol): Native Cursor AI integration
• HTTP API: Universal fallback that always works

📊 Comprehensive Data Capture

• ✅ Console logs (log, error, warn, info, debug)
• ✅ Network requests and responses
• ✅ Request/response headers and bodies
• ✅ Performance timing
• ✅ JavaScript exceptions with stack traces
• ✅ Failed requests (4xx, 5xx status codes)

🎯 Smart Features

• Auto-detects your active web app tab
• Filters out DevTools and internal Chrome pages
• Stores last 1000 items (prevents memory issues)
• Real-time streaming as data arrives
• Automatic cleanup on restart

🔧 Zero Configuration

• Works out of the box
• No external dependencies
• No complex setup
• Cross-platform (macOS, Linux, Windows)

📚 Commands

Access via Command Palette (Cmd/Ctrl+Shift+P):

🎮 Usage Examples

Example 1: Debugging Login Errors

You: "My login button isn't working"

Cursor (automatically fetches):
  • Console errors
  • Login API requests/responses

Cursor: "The login request returns 401 Unauthorized. 
You're sending 'username' but the API expects 'email'. 
Also, there's a JavaScript error trying to access 
response.data.token when response.data is undefined."

Example 2: Performance Issues

You: "The dashboard is slow to load"

Cursor (automatically analyzes):
  • Network request timing
  • Slow API calls
  • Large response sizes

Cursor: "The /api/dashboard endpoint takes 3.2 seconds 
and returns 120MB. You should add pagination and only 
fetch visible data."

Example 3: CORS Problems

You: "Getting CORS errors"

Cursor (automatically identifies):
  • CORS error in console
  • Blocked requests
  • Missing headers

Cursor: "Your request to https://api.external.com is 
blocked by CORS. The response is missing 
'Access-Control-Allow-Origin' header. Add your origin 
to the server's CORS configuration."

🔐 Privacy & Security

• 🏠 100% Local - All data stays on your machine
• 🔒 No Cloud - Nothing sent to external servers
• 🔐 Isolated Chrome - Separate profile for debugging
• 📖 Open Source - Full code available on GitHub

Your debugging data never leaves your computer.

🎨 Status Bar Integration

Visual indicator in the bottom-right corner:

• 🔴 CDP: Off - Not connected (click to start)
• 🟢 CDP: Connected - Active connection (click to stop)

🐛 Troubleshooting

Connection fails

• Ensure Chrome launches successfully
• Check Output panel: View > Output > "CDP Debug Server"
• Verify ports 3100 and 9222 are available

No data captured

• Use the Chrome window launched by the extension
• Refresh your webpage after connecting
• Ensure you're on an actual webpage (not chrome:// URL)

MCP tools not available

• MCP requires Cursor restart after first configuration
• HTTP API works immediately as fallback
• Both methods provide the same debugging data

🤝 Contributing

Contributions welcome! Check out our Contributing Guide.

GitHub: github.com/ncamaa/cdp-cursor-extension

📝 License

MIT License - Free to use, modify, and distribute.

🎉 What Developers Say

"This extension changed how I debug. No more copy-pasting!"

"Cursor can now see exactly what's happening in my browser."

"10x faster debugging is not an exaggeration."

📈 Stats

• ⏱️ 10x faster debugging workflow
• 🎯 100% accurate browser state inspection
• 💪 Zero manual effort for data collection
• 🚀 Instant context for Cursor AI

🔗 Links

• 📦 Marketplace: VS Code Marketplace
• 🐙 GitHub: github.com/ncamaa/cdp-cursor-extension
• 🐛 Issues: Report a bug
• 💬 Discussions: Join the conversation

Debug smarter, not harder. Give Cursor AI eyes into your browser. 👀🚀