Chrome开发工具MCP

Name: Chrome开发工具MCP
Author: benjaminr

作者：benjaminr249 星标更新：2025-10-06

安装使用来源：spider==github.com

项目介绍

Chrome DevTools MCP

一个通过MCP提供Chrome DevTools Protocol集成的Model Context Protocol (MCP)服务器。这允许您通过连接到Chrome的开发者工具来调试Web应用程序。

作为Claude Desktop扩展（.dxt）提供，实现一键轻松安装！

功能概述

此MCP服务器充当Claude与Chrome调试能力之间的桥梁。在Claude Desktop中安装后，您可以：

将Claude连接到运行在Chrome中的任何Web应用程序
调试网络请求、控制台错误和性能问题
检查JavaScript对象并在浏览器上下文中执行代码
通过与Claude的自然对话实时监控您的应用程序

注意：这是一个在Claude Desktop内部运行的MCP服务器——您不需要运行任何单独的服务器或进程。

特性

网络监控：捕获并分析HTTP请求/响应，带有过滤选项
控制台集成：读取浏览器控制台日志，分析错误并执行JavaScript
性能指标：计时数据、资源加载和内存利用率
页面检查：DOM信息、页面指标和多帧支持
存储访问：读取cookies、localStorage和sessionStorage
实时监控：实时跟踪控制台输出
对象检查：检查JavaScript对象和变量

安装

方案1：Claude Desktop扩展（最简单）

下载预构建的扩展：

从发布页面下载最新的.dxt文件
打开Claude Desktop
前往扩展程序并安装下载的.dxt文件
如需配置，请在扩展设置中设置Chrome路径

该扩展包含了所有依赖项，并且可以立即使用！

方案2：MCP CLI（高级）

快速安装（最常见）：

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

注意：mcp命令是Python MCP SDK的一部分。如果尚未安装，请使用pip install mcp进行安装。

所有安装选项：

# 克隆仓库
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

# 使用`--with-editable`标志使用pyproject.toml安装依赖项

# 基本安装，本地依赖项
mcp install server.py --with-editable .

# 使用自定义名称安装
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# 使用环境变量安装
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222

# 如果需要，安装额外的包
mcp install server.py -n "Chrome DevTools MCP" --with-editable . --with websockets --with aiohttp

# 使用环境文件安装（先复制.env.example到.env）
cp .env.example .env
# 编辑.env以包含您的设置
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -f .env

方案3：Claude Code集成

对于Claude Code CLI用户：

克隆此仓库

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

使用UV安装依赖项（创建虚拟环境）

uv sync  # 创建.venv并安装依赖项

使用绝对路径添加MCP服务器

重要提示：Claude Code需要绝对路径来正确工作，包括Python解释器和服务器脚本。

推荐使用绝对路径的设置：

# 获取绝对路径
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"

# 使用绝对路径添加服务器
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

替代方案：使用系统Python（如果全局安装了依赖项）：

# 只有在全局安装了依赖项的情况下
claude mcp add chrome-devtools python "$(pwd)/server.py" -e CHROME_DEBUG_PORT=

使用自定义作用域：

# 添加到用户作用域（跨所有项目可用）
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s user -e CHROME_DEBUG_PORT=9222

# 添加到项目作用域（仅限于该项目）
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s project -e CHROME_DEBUG_PORT=9222

验证安装

# 列出已配置的MCP服务器
claude mcp list

# 获取有关服务器的详细信息（检查路径是否为绝对路径）
claude mcp get chrome-devtools

# 输出应显示绝对路径，例如：
# Command: /Users/you/chrome-devtools-mcp/.venv/bin/python
# Args: ["/Users/you/chrome-devtools-mcp/server.py"]

常见路径问题及解决方案：

问题："python: command not found" 或 "server.py not found"
- 解决方案：如上所示使用绝对路径
问题：启动服务器时出现“ModuleNotFoundError”
- 解决方案：使用已安装依赖项的虚拟环境Python解释器
问题：服务器无法启动或显示为断开连接
- 解决方案：手动测试命令：/path/to/.venv/bin/python /path/to/server.py

方案4：手动Claude Desktop设置

克隆此仓库

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

安装依赖项

使用uv（推荐）：

uv sync

使用pip：

pip install -r requirements.txt

添加到Claude Desktop配置

编辑您的Claude Desktop配置文件：

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

重启Claude Desktop

验证安装

安装完成后（无论哪种方法），验证服务器是否可用：

打开Claude Desktop
查看会话中的MCP工具
尝试简单的命令：get_connection_status()

其他MCP客户端

对于其他MCP客户端，直接运行服务器：

python server.py

快速开始

安装到Claude Desktop后，您可以开始调试任何Web应用程序：

调试您的Web应用程序

一步设置（推荐）：

start_chrome_and_connect("localhost:3000")

替换localhost:3000为您应用的URL

如果Chrome未自动找到：

start_chrome_and_connect("localhost:3000", chrome_path="/path/to/chrome")

使用chrome_path参数指定自定义Chrome位置

此命令将：

启动启用调试的Chrome
导航到您的应用
连接MCP服务器到Chrome

手动设置（如果您更喜欢逐步操作）：

start_chrome()
navigate_to_url("localhost:3000")
connect_to_browser()

开始调试

一旦连接，使用以下命令：

get_network_requests() - 查看HTTP流量
get_console_error_summary() - 分析JavaScript错误
inspect_console_object("window") - 深入检查任何JavaScript对象

可用的MCP工具

Chrome管理

start_chrome(port?, url?, headless?, chrome_path?, auto_connect?) - 启动Chrome，启用远程调试，可选自动连接
start_chrome_and_connect(url, port?, headless?, chrome_path?) - 一步启动Chrome，连接并导航
connect_to_browser(port?) - 连接到现有的Chrome实例
navigate_to_url(url) - 导航到特定URL
disconnect_from_browser() - 断开与浏览器的连接
get_connection_status() - 检查连接状态

网络监控

get_network_requests(filter_domain?, filter_status?, limit?) - 获取网络请求，带过滤选项
get_network_response(request_id) - 获取详细的响应数据，包括正文

控制台工具

get_console_logs(level?, limit?) - 获取浏览器控制台日志
get_console_error_summary() - 获取组织好的错误和警告摘要
execute_javascript(code) - 在浏览器上下文中执行JavaScript
clear_console() - 清除浏览器控制台
inspect_console_object(expression) - 深入检查任何JavaScript对象
monitor_console_live(duration_seconds) - 实时监控控制台输出

页面分析

get_page_info() - 获取全面的页面指标和性能数据
evaluate_in_all_frames(code) - 在所有框架/iframe中执行JavaScript
get_performance_metrics() - 获取详细的性能指标和资源计时

存储与数据

get_storage_usage_and_quota(origin) - 获取存储使用量和配额信息
clear_storage_for_origin(origin, storage_types?) - 根据类型和源清除存储
get_all_cookies() - 获取所有浏览器cookies
clear_all_cookies() - 清除所有浏览器cookies
set_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?) - 设置cookie
get_cookies(domain?) - 获取浏览器cookies，可选域名过滤
get_storage_key_for_frame(frame_id) - 获取特定frame的存储键
track_cache_storage(origin, enable?) - 启用/禁用缓存存储跟踪
track_indexeddb(origin, enable?) - 启用/禁用IndexedDB跟踪
override_storage_quota(origin, quota_size_mb?) - 覆盖存储配额

使用案例

调试Web应用程序中的API调用

当您的Web应用程序发出失败或返回意外数据的API调用时：

简易设置：使用一步命令启动Chrome并导航到您的应用：

示例流程：

您： "我需要调试位于localhost:3000的React应用"
Claude： 我将启用调试并导航到您的应用。

start_chrome_and_connect("localhost:3000")

完美！Chrome现在正在运行并连接到您的应用。让我检查是否有任何失败的网络请求：

get_network_requests(filter_status=500)

我发现有3个失败的请求到您的API。让我获取第一个请求的详细信息：

get_network_response("request-123")

手动设置（如果您更喜欢）：

启动Chrome：使用start_chrome()
导航到您的应用：使用navigate_to_url("localhost:3000")
连接：使用connect_to_browser()
监控网络流量：使用get_network_requests()查看所有API调用

检查JavaScript控制台错误

当您的Web应用程序有JavaScript错误或意外行为时：

在连接的Chrome实例中导航到您的应用
检查控制台错误：使用get_console_error_summary()查看所有错误
实时监控错误：使用monitor_console_live(10)在交互时监视新错误
检查变量：使用inspect_console_object("myVariable")检查应用状态

示例流程：

您： "我的React组件没有正确更新"
Claude： 让我检查JavaScript控制台中的任何错误。

get_console_error_summary()

我发现有两个JavaScript错误。让我在您与组件交互时也监视控制台：

monitor_console_live(15)

现在尝试点击不工作的组件。我会观察任何新的错误或警告。

性能调试

当您的Web应用程序加载缓慢或占用过多内存时：

在连接的浏览器中加载您的应用
检查页面指标：使用get_page_info()查看加载时间和资源数量
分析性能：使用get_performance_metrics()查看详细的计时数据
监控内存使用情况：检查性能指标中的内存信息

示例流程：

您： "我的应用加载时间太长"
Claude： 让我分析您的应用性能。

get_page_info()

我发现您的页面有47个脚本，加载时间为3.2秒。让我获取更多详细的性能数据：

get_performance_metrics()

主要瓶颈是初始JavaScript捆绑包，大小为2.1MB。DOM处理也需要800毫秒。

调试身份验证问题

当登录或会话管理不起作用时：

导航到登录页面
检查cookies：使用get_cookies()查看身份验证cookies
登录过程中的网络监控：使用monitor_console_live()和get_network_requests()在登录过程中监控
检查存储的数据：使用JavaScript执行检查localStorage/sessionStorage

示例流程：

您： "用户无法保持登录状态"
Claude： 让我检查身份验证设置。

get_cookies()

我发现auth cookie存在。让我检查登录期间发生了什么，通过监控网络：

get_network_requests(filter_domain="your-api.com")

我发现登录请求返回200但没有Set-Cookie头。让我也检查localStorage：

execute_javascript("Object.keys(localStorage)")

DOM元素检查

get_document(depth?, pierce?) - 获取DOM文档结构
query_selector(node_id, selector) - 通过CSS选择器查找单个元素
query_selector_all(node_id, selector) - 通过CSS选择器查找多个元素
get_element_attributes(node_id) - 获取元素的所有属性
get_element_outer_html(node_id) - 获取元素的外部HTML
get_element_box_model(node_id) - 获取布局信息
describe_element(node_id, depth?) - 获取详细的元素描述
get_element_at_position(x, y) - 获取屏幕位置的元素
search_elements(query) - 按文本/属性搜索DOM元素
focus_element(node_id) - 聚焦DOM元素

CSS样式分析

get_computed_styles(node_id) - 获取计算的CSS样式
get_inline_styles(node_id) - 获取内联样式
get_matched_styles(node_id) - 获取匹配元素的所有CSS规则
get_stylesheet_text(stylesheet_id) - 获取样式表内容
get_background_colors(node_id) - 获取背景颜色和字体
get_platform_fonts(node_id) - 获取平台字体信息
get_media_queries() - 获取所有媒体查询
collect_css_class_names(stylesheet_id) - 收集CSS类名
start_css_coverage_tracking() - 开始CSS覆盖率跟踪
stop_css_coverage_tracking() - 停止并获取CSS覆盖率结果

常用命令

任务	命令
启动Chrome并连接到应用	`start_chrome_and_connect("localhost:3000")`
启动Chrome（手动设置）	`start_chrome()`
导航到页面	`navigate_to_url("localhost:3000")`
连接到浏览器	`connect_to_browser()`
查看所有网络请求	`get_network_requests()`
查找失败的API调用	`get_network_requests(filter_status=404)`
检查JavaScript错误	`get_console_error_summary()`
实时监控控制台	`monitor_console_live(10)`
检查页面加载性能	`get_page_info()`
检查变量	`inspect_console_object("window.myApp")`
查看cookies	`get_cookies()`
运行JavaScript	`execute_javascript("document.title")`

配置

环境变量

CHROME_DEBUG_PORT - Chrome远程调试端口（默认：9222）

MCP兼容性

MCP协议版本：2024-11-05
最小Python版本：3.10+
支持的MCP客户端：Claude Desktop，任何MCP兼容客户端
包管理器：uv（推荐）或pip

使用流程

前提条件（您的开发环境）

在您的开发环境中运行Web应用程序（例如，npm run dev，python -m http.server等）
记录您的应用可访问的URL

调试会话

通过Claude Desktop连接到您的应用：
```
start_chrome_and_connect("localhost:3000")
```
替换为您的应用URL
使用MCP工具调试您的应用：
- 监控网络请求
- 检查控制台错误
- 检查JavaScript对象
- 分析性能
在编辑器中更改代码
刷新或与您的应用互动
继续使用实时数据进行调试

手动连接（备选方案）

如果您更喜欢逐步控制：

start_chrome() - 启动Chrome并启用调试
navigate_to_url("your-app-url") - 导航到您的应用
connect_to_browser() - 连接MCP服务器
按需使用调试工具

安全注意事项

仅用于开发环境
不要连接到生产Chrome实例
服务器设计仅用于本地调试