STARWARCLOUD STARWAR.AI
返回市场
Chrome开发工具MCP

Chrome开发工具MCP

作者：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扩展（最简单）

下载预构建的扩展：

  1. 从发布页面下载最新的.dxt文件
  2. 打开Claude Desktop
  3. 前往扩展程序并安装下载的.dxt文件
  4. 如需配置，请在扩展设置中设置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用户：

  1. 克隆此仓库
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
  1. 使用UV安装依赖项（创建虚拟环境）
uv sync  # 创建.venv并安装依赖项
  1. 使用绝对路径添加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
  1. 验证安装
# 列出已配置的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设置

  1. 克隆此仓库
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
  1. 安装依赖项

使用uv（推荐）：

uv sync

使用pip：

pip install -r requirements.txt
  1. 添加到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"
      }
    }
  }
}
  1. 重启Claude Desktop

验证安装

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

  1. 打开Claude Desktop
  2. 查看会话中的MCP工具
  3. 尝试简单的命令：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")

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

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

检查JavaScript控制台错误

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

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

示例流程：

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

get_console_error_summary()

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

monitor_console_live(15)

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

性能调试

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

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

示例流程：

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

get_page_info()

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

get_performance_metrics()

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

调试身份验证问题

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

  1. 导航到登录页面
  2. 检查cookies：使用get_cookies()查看身份验证cookies
  3. 登录过程中的网络监控：使用monitor_console_live()和get_network_requests()在登录过程中监控
  4. 检查存储的数据：使用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")
查看cookiesget_cookies()
运行JavaScriptexecute_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

调试会话

  1. 通过Claude Desktop连接到您的应用：

    start_chrome_and_connect("localhost:3000")

    替换为您的应用URL

  2. 使用MCP工具调试您的应用：

    • 监控网络请求
    • 检查控制台错误
    • 检查JavaScript对象
    • 分析性能

  3. 在编辑器中更改代码

  4. 刷新或与您的应用互动

  5. 继续使用实时数据进行调试

手动连接（备选方案）

如果您更喜欢逐步控制：

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

安全注意事项

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