📋 基本信息
🎯 功能概述
这是一个专门用于控制和检查实时 Chrome 浏览器的技能。它通过 Chrome DevTools MCP 服务器 实现各种浏览器相关任务，从简单的页面导航到复杂的性能分析。
📌 适用场景
| 场景 |
说明 |
| 浏览器自动化 |
页面导航、点击元素、填写表单、处理对话框 |
| 视觉检查 |
截取网页截图或文本快照 |
| 调试 |
检查控制台消息、在页面上下文中执行 JavaScript、分析网络请求 |
| 性能分析 |
记录和分析性能追踪数据，识别瓶颈和 Core Web Vital 问题 |
| 模拟 |
调整视口大小、模拟网络/CPU 条件 |
🛠️ 工具分类
1️⃣ 导航与页面管理
| 工具 |
功能 |
new_page |
打开新标签页/页面 |
navigate_page |
跳转到指定 URL、刷新或导航历史 |
select_page |
在打开的页面之间切换上下文 |
list_pages |
查看所有打开的页面及其 ID |
close_page |
关闭指定页面 |
wait_for |
等待特定文本出现在页面上 |
2️⃣ 输入与交互
| 工具 |
功能 |
click |
点击元素（使用 snapshot 中的 uid） |
fill / fill_form |
向输入框输入文本或一次性填写多个字段 |
hover |
将鼠标悬停在元素上 |
press_key |
发送键盘快捷键或特殊键（如 “Enter”、”Control+C”） |
drag |
拖放元素 |
handle_dialog |
接受或取消浏览器警报/提示 |
upload_file |
通过文件输入上传文件 |
3️⃣ 调试与检查
| 工具 |
功能 |
take_snapshot |
获取基于文本的可访问性树（识别元素的最佳方式） |
take_screenshot |
捕获页面或特定元素的视觉截图 |
list_console_messages / get_console_message |
检查页面的控制台输出 |
evaluate_script |
在页面上下文中运行自定义 JavaScript |
list_network_requests / get_network_request |
分析网络流量和请求详情 |
4️⃣ 模拟与性能
| 工具 |
功能 |
resize_page |
更改视口尺寸 |
emulate |
节流 CPU/网络或模拟地理位置 |
performance_start_trace |
开始记录性能分析 |
performance_stop_trace |
停止记录并保存追踪数据 |
performance_analyze_insight |
从记录的性能数据中获取详细分析 |
🔄 工作流模式
模式 A：识别元素（Snapshot 优先）
始终优先使用 take_snapshot 而非 take_screenshot 来查找元素。snapshot 提供 interaction 工具所需的 uid 值。
1
2
3
| 1. take_snapshot 获取当前页面结构
2. 找到目标元素的 uid
3. 使用 click(uid=...) 或 fill(uid=..., value=...)
|
模式 B：故障排查
当页面出现问题时，同时检查控制台日志和网络请求。
1
2
3
| 1. list_console_messages 检查 JavaScript 错误
2. list_network_requests 识别失败的 (4xx/5xx) 资源
3. evaluate_script 检查特定 DOM 元素或全局变量的值
|
模式 C：性能分析
识别页面缓慢的原因。
1
2
3
| 1. performance_start_trace(reload=true, autoStop=true)
2. 等待页面加载/追踪完成
3. performance_analyze_insight 查找 LCP 问题或布局偏移
|
✅ 最佳实践
| 实践 |
说明 |
| 上下文感知 |
如果不确定当前激活的是哪个标签页，始终先运行 list_pages 和 select_page |
| 快照更新 |
在任何重大导航或 DOM 更改后获取新快照，因为 uid 值可能会变化 |
| 超时设置 |
对 wait_for 使用合理的超时时间，避免在加载缓慢的元素上挂起 |
| 截图使用 |
谨慎使用 take_screenshot 进行视觉验证，但逻辑操作应依赖 take_snapshot |
⚠️ 注意事项
- 安全警告: 该技能被 VirusTotal Code Insight 标记为可疑（可能包含风险模式如外部 API、eval 等），使用前请审查代码
- 安装要求: 需要 Chrome 浏览器和 chrome-devtools MCP 服务器支持
- 依赖环境: 需要配置 Chrome DevTools 协议连接
📦 安装方式
1
2
|
clawhub install chrome-devtools --force
|
如需进一步使用该技能，建议先审查其源代码以确保安全性，并确认您的环境已正确配置 Chrome DevTools 协议支持。
作者：iomelons
博客：https://iomelons.github.io