What types of network data can Claude see?

Claude can list all network requests, view specific request/response headers, and inspect payloads to help diagnose API integration issues.

Does this work in headless mode?

Yes, the skill supports a --headless flag for environments where a visible browser window is not required or available, such as CI/CD pipelines.

Can I use this with my existing logged-in Chrome session?

Yes, by using the --auto-connect flag and launching Chrome with remote debugging enabled, Claude can interact with your authenticated browser sessions.

What is the main difference between this and Playwright MCP?

While Playwright is focused on end-to-end testing and automation, Chrome DevTools MCP specializes in deep debugging, network inspection, and performance analysis of active browser sessions.

How do I verify the installation?

After installation, restart Claude Code and run the /mcp command to see 'chrome-devtools' listed among the active servers.

Chrome DevTools MCP Integration

Name: Chrome DevTools MCP Integration
Author: jpoutrin

byjpoutrin

•

浏览器自动化

Integrates Chrome DevTools into Claude Code to enable real-time debugging, network inspection, and browser-based performance analysis.

This skill installs the Chrome DevTools MCP server, bridging the gap between Claude Code and the Chrome browser. It empowers developers to perform deep technical debugging directly through AI, including inspecting console logs, analyzing network traffic, evaluating JavaScript in real-time, and capturing screenshots for visual verification. Whether you're troubleshooting complex frontend issues or optimizing page performance, this integration provides Claude with the high-fidelity browser data needed to diagnose and fix web application bugs more efficiently.

主要功能

01Detailed network request and response analysis

02JavaScript evaluation within the live page context

03Visual debugging through screenshots and accessibility snapshots

048 GitHub stars

05Real-time console and error log inspection

06Performance tracing and automated insight generation

使用场景

01Auditing web application performance and pinpointing bottlenecks

02Debugging complex frontend state and asynchronous network calls

03Automating visual regression testing and DOM interaction verification

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jpoutrin/product-forge install-chrome-devtools-mcp

For use in Claude.ai and ChatGPT

Download Skill