chrome-devtools

Chrome DevTools MCP 技能

使用 Chrome DevTools Protocol 完整地自动化和调试 Chrome 浏览器。此技能可访问所有 Chrome DevTools 功能，支持 Web 开发、测试和调试任务。

功能

1. 导航与自动化 - 控制浏览器导航、标签页和页面交互
2. 与页面交互 - 点击、输入、拖放、填写表单、上传文件
3. 调试与检查 - 查看控制台日志、网络请求、执行脚本
4. 性能分析 - 记录跟踪信息并获取性能洞察
5. 模拟 - 测试不同设备、网络条件和视口
6. 视觉测试 - 截取屏幕截图和 DOM 快照

快速参考

有关各项操作的详细说明，请参阅：

• NAVIGATION.md - 页面导航、标签页、等待
• INTERACTION.md - 点击、输入、表单、上传
• DEBUGGING.md - 控制台日志、网络请求、脚本执行
• PERFORMANCE.md - 性能跟踪和分析
• EMULATION.md - 设备和网络模拟
• VISUAL.md - 屏幕截图和 DOM 快照

常见工作流

Web 测试工作流

1. 使用 navigate_page 导航到页面
2. 使用 click、fill、press_key 与元素交互
3. 使用 take_screenshot 或 list_console_messages 验证结果
4. 使用 list_network_requests 检查网络活动

性能分析工作流

1. 使用 performance_start_trace 开始跟踪
2. 导航到页面或与页面交互
3. 使用 performance_stop_trace 停止跟踪
4. 使用 performance_analyze_insight 获取洞察

调试工作流

1. 导航到有问题的页面
2. 使用 list_console_messages 检查控制台
3. 使用 list_network_requests 检查网络
4. 使用 evaluate_script 执行诊断脚本
5. 截取屏幕截图以进行视觉确认

表单测试工作流

1. 导航到表单页面
2. 使用 fill 填写单个字段，或使用 fill_form 批量填写
3. 如有需要，使用 upload_file 上传文件
4. 提交表单，并通过屏幕截图／控制台进行验证

工具类别概览

输入自动化（8 个工具）

• click - 点击元素
• drag - 拖放操作
• fill - 在字段中输入文本
• fill_form - 填写多个表单字段
• handle_dialog - 管理警告框／对话框
• hover - 将鼠标悬停在元素上
• press_key - 键盘输入
• upload_file - 处理文件上传

导航（6 个工具）

• navigate_page - 前往 URL
• new_page - 创建新标签页
• close_page - 关闭标签页
• list_pages - 查看已打开的标签页
• select_page - 切换标签页
• wait_for - 等待条件满足

模拟（2 个工具）

• emulate - 模拟设备／条件
• resize_page - 调整视口大小

性能（3 个工具）

• performance_start_trace - 开始记录
• performance_stop_trace - 结束记录
• performance_analyze_insight - 获取建议

网络（2 个工具）

• list_network_requests - 查看所有请求
• get_network_request - 获取请求详情

调试（5 个工具）

• evaluate_script - 运行 JavaScript
• take_screenshot - 截取画面
• take_snapshot - 捕获 DOM
• list_console_messages - 查看控制台
• get_console_message - 获取特定消息

关键指示

必须遵守：使用任何 Chrome DevTools 工具之前，必须先使用 Read 工具加载相关参考文件。这些参考文件包含本概览中未提及的重要操作说明。

当用户要求使用 Chrome DevTools 时：

1. 确定用户想要执行的操作（导航、调试、测试、分析）
2. 必须：在执行任何工具之前，使用 Read 工具加载相关参考文件：
   • 导航任务 → 首先读取 references/NAVIGATION.md
   • 交互任务 → 首先读取 references/INTERACTION.md
   • 调试任务 → 首先读取 references/DEBUGGING.md
   • 性能任务 → 首先读取 references/PERFORMANCE.md
   • 仿真任务 → 首先读取 references/EMULATION.md
   • 视觉测试任务 → 首先读取 references/VISUAL.md
3. 按照已加载参考文件中的模式执行相应的 MCP 工具命令
4. 清晰地报告结果，并根据需要提供截图或数据
5. 根据需要串联操作（例如：导航 → 交互 → 验证）

未先加载并阅读相关参考文档时，切勿尝试使用 Chrome DevTools 工具。

最佳实践

• 始终适时等待——使用 wait_for 确保页面就绪
• 妥善处理错误——检查控制台消息和网络错误
• 截取屏幕截图——视觉确认有助于调试
• 按逻辑串联操作——先导航再交互，先启动跟踪再执行操作
• 清理资源——完成后关闭页面，以释放资源
• 谨慎使用选择器——确保元素选择器具体且可靠

示例

截取网站屏幕截图

User: "Take a screenshot of example.com"
Me: Uses navigate_page → wait_for → take_screenshot

测试表单提交

User: "Fill out the login form on staging.example.com"
Me: Uses navigate_page → fill_form → click → list_console_messages

分析页面性能

User: "Check the performance of our homepage"
Me: Uses performance_start_trace → navigate_page → performance_stop_trace → performance_analyze_insight

调试网络问题

User: "Why is the API call failing on /dashboard?"
Me: Uses navigate_page → list_network_requests → get_network_request (for failed request)

测试移动视口

User: "How does the site look on iPhone 13?"
Me: Uses emulate (iPhone 13) → navigate_page → take_screenshot

配置

应在 Claude Code 的 MCP 设置中配置 Chrome DevTools MCP 服务：

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

可选配置标志：

• --headless false - 显示浏览器窗口
• --categoryEmulation - 启用仿真工具
• --categoryPerformance - 启用性能工具
• --categoryNetwork - 启用网络工具