What are the main use cases for this tool?

Key use cases include debugging API calls, troubleshooting JavaScript errors, analyzing web application performance, inspecting application state, and monitoring console output in real-time directly within your Claude environment.

What core debugging features does it provide?

It offers comprehensive features including network monitoring, console log analysis, JavaScript execution, performance metrics, and deep inspection of page elements, objects, and storage within your browser context.

What is Chrome DevTools MCP?

Chrome DevTools MCP is a Model Context Protocol (MCP) server that seamlessly integrates Chrome's powerful debugging capabilities directly into Claude Desktop and Claude Code, acting as a bridge for web application debugging.

How is Chrome DevTools MCP installed?

The easiest method is via the pre-built Claude Desktop Extension (.dxt file) for one-click installation. Advanced users have options like MCP CLI, Claude Code CLI, or manual setup.

Chrome DevTools

Name: Chrome DevTools
Author: benjaminr

bybenjaminr

•

292

•

浏览器自动化

分析与监控

开发者工具

Provides integration with Chrome's debugging capabilities by acting as a Model Context Protocol (MCP) server for Claude Desktop and Claude Code.

Chrome DevTools is an MCP server designed to bridge Claude's conversational AI with Chrome's powerful developer tools. It enables users to directly interact with web applications running in Chrome through natural language commands within Claude Desktop or Claude Code. This integration allows for comprehensive debugging, real-time monitoring, and inspection of web page elements, network traffic, console logs, and performance metrics, streamlining the web development and debugging workflow.

主要功能

01Performance Metrics: Access timing data, resource loading, and memory utilization

02Network Monitoring: Capture and analyze HTTP requests/responses with filtering

03Object Inspection: Deeply inspect JavaScript objects and variables in the browser context

040 GitHub stars

05Console Integration: Read browser console logs, analyze errors, and execute JavaScript

06Page Inspection: Retrieve DOM information, page metrics, and multi-frame support

使用案例

01Checking JavaScript console errors and observing real-time application behavior

02Analyzing web application load times and performance bottlenecks

03Debugging API calls in web applications by monitoring network traffic and responses