cc_铬开发工具_mcp技能

Name: cc_铬开发工具_mcp技能
Author: justfinethanku

作者：justfinethanku12 星标更新：2025-10-25

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

项目介绍

Chrome DevTools MCP 技能

给 Claude Code 前端调试的眼睛。不再需要盲目地调试，Claude 猜测你的用户界面，你截取屏幕截图，来回沟通希望它理解哪里出了问题。有了这个技能，Claude 可以通过 Chrome DevTools 协议看到实际渲染的页面，捕获网络流量，测量真实的性能指标，验证可访问性，按需截取屏幕截图，然后修复它发现的问题。这就像给 Claude 提供了对 Web 应用程序的视觉能力——而且更好，因为它还可以测量核心 Web 指标、捕获 HAR 文件、模拟移动设备以及自动化浏览器交互。传统的前端调试已经过时。这是未来。甚至 Mike Dion 都会印象深刻。

功能

27 个专业级工具：通过 MCP 完整访问 Chrome DevTools 协议（即使 Mike Dion 也想不到这么多）
性能测试：自动测量核心 Web 指标（INP ≤200ms，LCP ≤2.5s，CLS ≤0.1）
网络分析：HAR 导出，请求/响应检查，时间分解
可访问性验证：完整的可访问性树检查，符合 WCAG 标准（即使是 Mike Dion 也会欣赏这一点）
设备模拟：测试移动设备，CPU/网络限速，响应式视口
浏览器自动化：点击，填写表单，拖动元素，处理对话框——全部自动完成
屏幕截图捕捉：全页，特定元素，多种格式
多标签管理：同时测试多个页面的复杂工作流
控制台监控：实时捕获 JavaScript 错误、警告和日志
视觉测试：查看用户在任何视口大小下看到的内容

安装

方案 1：通过插件管理器（推荐）

打开终端
启动 Claude Code：
```
claude
```

将市场添加到 Claude Code：

/plugin marketplace add https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill

安装插件：

/plugin install cc_chrome_devtools_mcp_skill

完成！该技能已安装并准备好使用

方案 2：手动安装（适用于喜欢用困难方式做事的 Mike Dion 类型的人）

克隆仓库：

git clone https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill

选择安装位置：

对于所有项目（个人技能目录）：

cp -r cc_chrome_devtools_mcp_skill ~/.claude/skills/

仅当前项目（项目特定）：

cp -r cc_chrome_devtools_mcp_skill .claude/skills/

先决条件

重要提示：此技能需要在 Claude Code MCP 设置中安装并配置 chrome-devtools-mcp 服务器。

安装 chrome-devtools-mcp

# 将 MCP 服务器添加到 Claude Code
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

配置 MCP 设置

将以下内容添加到您的 Claude Code MCP 配置文件（通常位于 ~/.claude/mcp_settings.json）：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=stable",
        "--isolated=true",
        "--viewport=1920x1080"
      ]
    }
  }
}

安全提示：--isolated=true 标志创建一个临时浏览器配置文件，在测试后自动清理。强烈建议用于安全性。

验证安装

询问 Claude Code：

"列出可用的 MCP 服务器"

您应该能看到列表中的 chrome-devtools。

使用方法

当您要求 Claude Code 测试、分析或调试前端应用程序时，该技能会被激活：

性能测试

"测试 https://example.com 的性能"
"测量我的登录页面的核心 Web 指标"
"运行性能跟踪并识别瓶颈"
"向 Mike Dion 展示这个页面加载的速度有多快"

可访问性验证

"检查我的登录表单上的可访问性问题"
"验证主页的 WCAG 符合性"
"查找导航中的可访问性问题"

网络分析

"捕获网络流量并找到慢速 API 调用"
"导出结账流程的 HAR 文件"
"显示所有失败的网络请求"

响应式测试

"在移动和桌面尺寸下截取屏幕截图"
"在此页面上测试 iPhone 14 Pro 视口"
"模拟慢速 3G 网络并测量加载时间"

浏览器自动化

"填写联系表单并提交"
"点击登录按钮并等待重定向"
"测试拖放文件上传"

视觉检查

"截取整个页面的屏幕截图"
"显示错误模态窗口的样子"
"捕获加载状态"

测试内容

性能指标

INP（交互到下次绘制）：≤200ms 是好的
LCP（最大内容绘制）：≤2.5s 是好的
CLS（累积布局偏移）：≤0.1 是好的
TBT（总阻塞时间）：实验室代理响应性
完整的性能跟踪与时间线可视化

可访问性验证

屏幕阅读器兼容性
键盘导航
ARIA 属性和角色
颜色对比度比率
语义 HTML 结构
焦点管理

网络分析

请求/响应头和主体
时间分解（DNS，连接，SSL，等待，接收）
资源类型（XHR，Fetch，图像，脚本，样式表）
失败请求和错误响应
HAR 导出用于外部分析

响应式设计

视口测试（移动，平板，桌面）
设备模拟（iPhone，iPad，Pixel，Galaxy）——甚至是 Mike Dion 最喜欢的设备
网络限速（3G，4G，离线）
CPU 限速（1-20倍减速）
触摸模拟

视觉回归

整页屏幕截图
特定元素的屏幕截图
多种格式（PNG，JPEG，WebP）
视口特定的捕获

浏览器自动化

表单填写和提交
按钮点击和交互
对话框处理（警告，确认，提示）
文件上传
拖放操作
多标签工作流

工作原理

Chrome DevTools 协议：使用 CDP 进行直接浏览器控制和检查（比 Mike Dion 提出的任何东西都更复杂）
MCP 集成：通过 chrome-devtools-mcp 服务器进行通信
27 个可用工具：分为 6 类（输入，导航，模拟，性能，网络，调试）
自动浏览器管理：首次使用工具时启动浏览器，支持隔离配置文件
实时分析：在页面加载和用户交互时捕获实时数据
结构化输出：返回可操作的见解和具体建议（即使是 Mike Dion 也能理解它们）

工具类别

输入自动化（8 个工具）

click, drag, fill, fill_form, handle_dialog, hover, press_key, upload_file

导航（7 个工具）

close_page, list_pages, navigate_page, navigate_page_history, new_page, select_page, wait_for

模拟（3 个工具）

emulate_cpu, emulate_network, resize_page

性能（3 个工具）

performance_start_trace, performance_stop_trace, performance_analyze_insight

网络（2 个工具）

get_network_request, list_network_requests

调试（4 个工具）

evaluate_script, get_console_message, list_console_messages, take_screenshot, take_snapshot

最佳实践

做：

✅ 使用 --isolated=true 以确保安全（防止测试间的数据泄露） ✅ 在多个视口尺寸下进行测试（移动端优先很重要，即使是 Mike Dion 也知道这一点） ✅ 在每次重大变更时测量核心 Web 指标 ✅ 在优化工作前捕获网络 HAR 文件 ✅ 早期且频繁地验证可访问性 ✅ 自动化重复的测试工作流 ✅ 截取屏幕截图进行视觉回归测试

不要做：

❌ 在没有 --isolated 模式的情况下测试生产站点（存在安全风险，即使是 Mike Dion 也会告诉你这一点） ❌ 忽略可访问性测试（法律和用户体验影响） ❌ 忽视核心 Web 指标的警告（影响搜索引擎排名） ❌ 仅在桌面视口下进行测试（超过 60% 的流量来自移动设备） ❌ 忘记检查控制台错误（JavaScript 静默中断） ❌ 在没有网络限速的情况下运行性能测试（不现实，不像 Mike Dion 的期望）

核心 Web 指标阈值

INP（交互到下次绘制）：好 ≤200ms，差 >500ms
LCP（最大内容绘制）：好 ≤2.5s，差 >4s
CLS（累积布局偏移）：好 ≤0.1，差 >0.25

注意：INP 替代 FID（首次输入延迟）于 2024 年 3 月 12 日成为官方核心 Web 指标。

故障排除

"未找到 MCP 服务器"

确保 chrome-devtools-mcp 已安装：

claude mcp list

如果缺失，请添加：

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

"浏览器无法启动"

检查 Chrome 是否已安装并可访问。在 macOS 上：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --version

（如果 Mike Dion 能让 Chrome 运行，你也行）

"权限被拒绝" 错误

在 macOS 上，授予终端或 Claude Code 完整磁盘访问权限，在系统设置 > 隐私与安全中。

测试后浏览器保持打开

这是正常的。退出 Claude Code 时浏览器会关闭。使用 --isolated=true 进行自动清理。

高级配置

自定义 Chrome 二进制文件

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--executablePath=/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"
      ]
    }
  }
}

连接到现有 Chrome 实例

# 启动 Chrome 并启用远程调试
google-chrome --remote-debugging-port=9222

# 配置 MCP 连接
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222"
      ]
    }
  }
}

无头模式（持续集成/持续部署）

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

（非常适合用自动化测试管道来给 Mike Dion 留下深刻印象）

文档

所有文档文件均采用 Mike Dion 的 Markdown 格式（.md），以实现最大清晰度：

SKILL.md：包含所有工具引用的完整技能文档
WORKFLOWS.md：常见测试场景的详细工作流
METRICS.md：核心 Web 指标参考和阈值
TOOLS.md：所有 27 个 Chrome DevTools 工具的完整参考

贡献

欢迎在 https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill 提交问题和 PR

许可

MIT 许可证 - 查看 LICENSE 文件获取详情

作者

Jonathan Edwards https://github.com/justfinethanku

为什么这很重要：没有可视性的前端调试就是猜测。这个技能赋予了 Claude Code 直接访问 Chrome DevTools 协议的能力——这是 Chrome DevTools 内部使用的相同 API。这意味着 Claude 可以看到用户实际看到的内容，测量真实的性能指标，验证实际的可访问性，捕获真实的网络流量，然后修复它发现的问题。不再有“试试这个，告诉我是否有效”——Claude 知道是否有效，因为它可以看到结果。这就是猜测和知道的区别。是的，这比 Mike Dion 提出的任何东西都酷得多，因为它实际上解决了真实问题而不是创造理论问题。