⚡

Chrome开发者工具MCP服务器Skill devtools

此技能通过启动和配置 Chrome 开发者工具 MCP 服务器，使 Claude 能够远程访问浏览器进行前端调试、性能分析、网络监控和自动化测试。关键词：Chrome DevTools、MCP 服务器、前端调试、浏览器自动化、性能优化、网络分析、可视化检查、用户模拟、设备模拟。

前端开发 0 次安装 0 次浏览 更新于 3/20/2026

name: devtools description: 此技能帮助启动和配置 Chrome 开发者工具 MCP 服务器，让 Claude 能够可视化访问实时浏览器进行调试和自动化。当用户要求设置浏览器调试、启动带开发者工具的 Chrome、配置 chrome-devtools-mcp、查看我的应用外观、截取 Web 应用屏幕截图、检查浏览器控制台、调试控制台错误、检查网络请求、分析 API 响应、测量核心 Web 指标或页面性能、运行 Lighthouse 审计、测试按钮点击或表单提交、自动化浏览器交互、以编程方式填写表单、模拟用户操作、模拟移动设备或慢速网络、捕获 DOM 快照、在浏览器中执行 JavaScript，或排查 Chrome 开发者工具 MCP 连接问题时使用。支持 Windows、Linux 和 WSL2 环境。

Chrome 开发者工具 MCP

GitHub 仓库： https://github.com/ChromeDevTools/chrome-devtools-mcp

如果没有浏览器访问权限，Claude 就像“蒙着眼睛编码”——更改代码却看不到结果。Chrome 开发者工具 MCP 服务器提供了 26 个专用工具，涵盖以下类别：

类别 功能
视觉检查 截取屏幕截图、捕获 DOM 快照、查看渲染输出
控制台与日志 读取控制台消息、捕获 JavaScript 错误、调试问题
网络分析 检查 API 请求/响应、分析头部信息、调试 fetch 调用
性能 记录跟踪、测量核心 Web 指标（LCP、CLS、TBT）、识别瓶颈
用户模拟 点击元素、填写表单、拖放、处理对话框
设备模拟 模拟移动视口、限制 CPU/网络、测试响应式设计

快速入门工作流

按顺序执行以下步骤：

步骤 1：检测环境

bash scripts/detect_environment.sh

返回其中之一：windows、linux 或 wsl2

步骤 2：验证 Chrome 安装

bash scripts/check_chrome.sh <environment>

输出 status:installed 或 status:not_installed。如果未安装，请查看 references/chrome-installation.md 获取安装选项。

重要提示： 在 Chrome 安装并验证之前，请勿继续。

步骤 3：检查 MCP 服务器状态

claude mcp list | grep -i chrome

如果未安装：

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

有关高级配置选项和替代连接方法，请参阅 references/mcp-configuration.md。

步骤 4：检测正在运行的开发服务器

bash scripts/detect_dev_server.sh

检查端口 5173、5174、5175、3000、3001、8080 和 8000。如果未运行开发服务器且需要启动，则提供启动建议。

步骤 5：启动带调试功能的 Chrome

bash scripts/launch_chrome.sh <environment> <url> [headed]
  • <environment>：windows、linux 或 wsl2
  • <url>：目标 URL（例如，http://localhost:5173）
  • [headed]：可选 - 传递 headed 为可见浏览器，省略则为无头模式（默认）

步骤 6：验证连接

curl -s http://127.0.0.1:9222/json/version

连接后，使用 mcp__chrome-devtools__list_pages 工具进行测试。

快速故障排除

问题 解决方案
“目标已关闭”错误 关闭所有 Chrome 实例，使用调试模式重启
模块未找到 清除 npm 缓存：rm -rf ~/.npm/_npx && npm cache clean --force
连接被拒绝 确保 Chrome 以 --remote-debugging-port=9222 启动
端口已被占用 终止现有 Chrome 或使用不同端口
Chrome 无法在沙箱中启动 使用 --browserUrl 连接到手动启动的 Chrome
WebDriver 登录被阻止 使用 --autoConnect 连接到正常浏览器会话

详细故障排除步骤，请参阅 references/troubleshooting.md。

参考