Chrome DevTools MCP技能
让Claude Code关注你的前端。再也不用盲目调试了，Claude会猜测你的UI，你会截图，然后来回走动，希望它能理解出了什么问题。凭借此技能，Claude可以通过Chrome DevTools协议查看您的实际渲染页面，捕获网络流量，测量实际性能指标，验证可访问性，按需截图，然后确定所发现的内容。这就像给克劳德提供了web应用程序的愿景——除了更好，因为它还可以测量核心web生命周期、捕获HAR文件、模拟移动设备和自动化浏览器交互。传统的前端调试已经死了。这就是未来。甚至迈克·迪翁也会印象深刻。
特性
- 27个专业级工具：通过MCP完全访问Chrome DevTools协议（就连Mike Dion也想不到这么多）
- 性能测试：自动核心网络生命体征测量（INP≤200ms，LCP≤2.5s，CLS≤0.1）
- 网络分析：HAR导出、请求/响应检查、时间细分
- 可访问性验证：通过WCAG合规性检查进行全面的可访问性树检查（即使是Mike Dion也会很感激）
- 设备仿真：测试移动设备、调节CPU/网络、响应式视口
- 浏览器自动化：单击、填写表单、拖动元素、处理对话框-全部自动
- 电脑屏幕截图工具：整页，特定元素，多种格式
- 多标签管理：同时跨多个页面测试复杂的工作流
- 控制台监控：实时捕获JavaScript错误、警告和日志
- 目视检测：查看用户在任何视口大小下看到的内容
安装
选项1：通过插件管理器（推荐）
- 打开终端
- 启动克劳德代码：
claude- 将市场添加到Claude Code：
/plugin marketplace add https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill- 安装插件：
/plugin install cc_chrome_devtools_mcp_skill- 完成！该技能现已安装并准备使用
选项2：手动安装（适用于世界上喜欢以艰苦方式做事的Mike Dions）
- 克隆存储库：
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/先决条件
重要： 这项技能需要 chrome-devtools-mcp 服务器将在您的Claude Code MCP设置中安装和配置。
安装chrome devtools mcp
# Add the MCP server to 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 flag创建了一个临时浏览器配置文件，在测试后会自动清理。强烈推荐安全。
验证安装
询问克劳德代码：
"List available MCP servers"你应该看看 chrome-devtools 在列表中。
用法
当你要求Claude Code测试、分析或调试前端应用程序时，该技能就会激活：
性能测试
"Test the performance of https://example.com"
"Measure Core Web Vitals for my landing page"
"Run a performance trace and identify bottlenecks"
"Show Mike Dion how fast this page loads"可访问性验证
"Check accessibility issues on my login form"
"Validate WCAG compliance for the homepage"
"Find accessibility problems in the navigation"网络分析
"Capture network traffic and find slow API calls"
"Export HAR file for the checkout flow"
"Show me all failed network requests"响应式测试
"Take screenshots at mobile and desktop sizes"
"Test this page on iPhone 14 Pro viewport"
"Emulate slow 3G network and measure load time"浏览器自动化
"Fill out the contact form and submit it"
"Click the login button and wait for redirect"
"Test the drag-and-drop file upload"目视检查
"Take a screenshot of the entire page"
"Show me what the error modal looks like"
"Capture the loading state"测试内容
性能指标
- 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也知道这一点） ✅ 衡量每一次重大变化的核心网络生命 ✅ 在优化工作之前捕获网络HAR文件 ✅ 尽早并经常验证可访问性 ✅ 自动化重复的测试工作流程 ✅ 截取屏幕截图进行可视化回归测试
不要：
❌ 无测试生产现场 --isolated 模式（安全风险，即使是Mike Dion也会告诉你） ❌ 跳过可访问性测试（法律和用户体验影响） ❌ 忽略核心网络重要信息警告（影响SEO排名） ❌ 仅在桌面视口上进行测试（60%以上的流量来自移动设备） ❌ 忘记检查控制台错误（JavaScript静默中断） ❌ 在没有网络限制的情况下运行性能测试（与Mike Dion的期望不同，这是不切实际的）
核心网络生命阈值
- INP（与下一幅画的交互）：良好≤200ms，较差>500ms
- LCP（含量最高的油漆）：良好≤2.5秒，较差>4秒
- CLS（累积布局偏移）：良好≤0.1，较差>0.25
备注：INP于2024年3月12日取代FID（首次输入延迟），成为官方核心网络重要信息。
故障排除
“找不到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实例
# Launch Chrome with remote debugging
google-chrome --remote-debugging-port=9222
# Configure MCP to connect
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://127.0.0.1:9222"
]
}
}
}无头模式（CI/CD）
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--headless=true",
"--isolated=true"
]
}
}
}（非常适合用您的自动化测试管道给Mike Dion留下深刻印象）
文档
所有文档文件都是用Mike Dion的Markdown格式（.md）编写的，以获得最大的清晰度：
- 技能.md：完整的技能文档，包括所有工具参考
- 工作流.md：常见测试场景的详细工作流程
- METRIC.md：核心网络重要信息参考和阈值
- TOOLS.md：所有27个Chrome DevTools工具的完整参考
贡献
问题和PR欢迎访问：https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill
许可证
MIT许可证-有关详细信息，请参阅许可证文件
作者
乔纳森·爱德华兹 https://github.com/justfinethanku
______________________________________________________________________
为什么这很重要：没有可见性的前端调试是猜测。此技能使Claude Code可以直接访问Chrome DevTools Protocol，这与Chrome DevTools内部使用的API相同。这意味着Claude可以准确地看到用户看到的内容，衡量真实的性能指标，验证实际的可访问性，捕获真实的网络流量，然后解决它发现的问题。再也不用“试试这个，让我知道它是否有效”了——克劳德知道它是否奏效，因为它可以看到结果。这就是猜测和知道之间的区别。是的，这比迈克·迪翁提出的任何建议都要酷得多，因为它实际上解决了实际问题，而不是创造了理论问题。