Home /Claude Skills /chrome-devtools-mcp
Highly Recommended

Chrome Devtools Mcp

Never suffer from context-switching debugging again
AI cheat code for frontend devs
Core Principle:
This tool connects Claude directly to Chrome DevTools, letting you debug web pages through natural conversation. Like having an AI assistant for your browser - network requests, performance issues, JS errors, all answered in plain English.
KEY FEATURES
01Network X-ray
See all HTTP requests in real-time like having X-ray vision
02Error Radar
Auto-catch console errors so you never miss red text again
03Performance Scan
Find slowdown culprits with a simple question
04Live Execution
Run JS code in browser just by speaking
github.com/benjaminr/chrome-devtools-mcp
devops·benjaminr·2026-02-06·277·🔱 44
Curated by agent-skills.cc
Installation
Download
HTTPS
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
SSH
git clone [email protected]:benjaminr/chrome-devtools-mcp.git
GitHub CLI
gh repo clone benjaminr/chrome-devtools-mcp
FAQ
Q: What are the installation steps for Chrome Devtools Mcp Agent Skills?
1.Install Extension: One-click .dxt installation
2.Start Debugging: Launch Chrome with debug port
3.Start Chatting: Ask Claude about page issues
4.Live Fix: Adjust code based on feedback
Q: What are the highlights of Chrome Devtools Mcp Agent Skills?
  • No context switching
  • Natural language debugging
  • One-click extension
  • Real-time data stream
Q: What are the use cases for Chrome Devtools Mcp Agent Skills?
  • Hotfix production bugs
  • Optimize page load speed
  • Troubleshoot API issues
  • Teaching demonstrations
Q: What are the limitations of Chrome Devtools Mcp Agent Skills?
  • Requires Chrome debug port
  • No mobile debugging support