🔧 DevTools MCP

A Model Context Protocol (MCP) server for deep Chrome DevTools integration with LLMs.

✨ Overview

DevTools MCP bridges the gap between Large Language Models and frontend debugging. By wrapping the Chrome DevTools Protocol (CDP) into an MCP server, it allows AI coding assistants to actively inspect the DOM, monitor network requests, evaluate JavaScript within the browser context, and take screenshots—all autonomously.

🚀 Key Capabilities

• DOM Inspection: Provide LLMs with real-time access to the DOM tree for accessibility and structure analysis.
• Network Monitoring: Intercept and analyze network requests and responses directly via the LLM.
• Console Logs: Capture and stream browser console logs (warnings, errors) to your AI agent.
• JavaScript Execution: Safely execute JavaScript in the browser context to test fixes or manipulate state.
• Screenshots & Tracing: Take automated screenshots and performance traces for diagnostic purposes.

📦 Installation

npm install -g devtools-mcp

🛠️ Configuration (Claude Desktop)

To use this with Claude Desktop or any other MCP client, add it to your configuration file (e.g., ~/.config/claude/config.json):

{
  "mcpServers": {
    "devtools-mcp": {
      "command": "npx",
      "args": ["devtools-mcp"]
    }
  }
}

💻 Usage Example

Once connected, your LLM can execute commands like:

• "Take a snapshot of the currently active page."
• "Monitor the network tab for failing API calls."
• "Click the button with ID submit-form."
• "Evaluate document.title and return the result."

---

🚀 Discover More from Stackaura

If you found this tool useful, check out our other high-performance web utilities and follow Ahmar Hussain for more open-source excellence.

🌟 Featured Projects

• Stackaura Hub - The central index for all 100 repositories.
• Free LLM APIs - A curated list of zero-cost AI endpoints.
• Awesome MCP Servers - The ultimate collection of Model Context Protocol implementations.
• System Design Cheatsheet - Master complex architectures in minutes.
• Next.js SaaS Starter - The fastest way to launch your next product.

🔗 Stay Connected

• Website: stackaura.com
• LinkedIn: Ahmar Hussain
• Facebook: Ahmar Hussain
• GitHub: @RanaAhmar

---

---

🌟 Part of the Stackaura Ecosystem

Empowering developers with automated tools and high-performance solutions.

Explore more:

• 🚀 All Projects
• 🛠️ Daily Coding Tips
• 📊 Profile Dashboard

If you find this project useful, please consider giving it a star! ⭐