用途:该技能用于控制并检查实时运行的 Chrome 浏览器,依托 chrome-devtools MCP 服务器完成从简单页面导航到复杂性能剖析的浏览器相关任务。
主要能力:
- 导航与页面管理:new_page 打开新标签页,navigate_page 访问 URL、刷新或前进后退,select_page 切换页面上下文,list_pages 列出所有页面及 ID,close_page 关闭页面,wait_for 等待指定文本出现。
- 输入与交互:click 点击元素(使用快照中的 uid),fill / fill_form 填写输入框或批量填表,hover 悬停,press_key 发送快捷键或特殊键(如 "Enter"、"Control+C"),drag 拖放,handle_dialog 接受或关闭浏览器弹窗,upload_file 通过文件输入上传文件。
- 调试与检查:take_snapshot 获取文本化无障碍树(最适合定位元素),take_screenshot 截取页面或元素视觉图,list_console_messages / get_console_message 查看控制台输出,evaluate_script 在页面上下文执行自定义 JavaScript,list_network_requests / get_network_request 分析网络流量与请求详情。
- 模拟与性能:resize_page 调整视口尺寸,emulate 限速 CPU/网络或模拟地理位置,performance_start_trace 开始记录性能剖析,performance_stop_trace 停止并保存,performance_analyze_insight 获取详细分析。
使用方式:定位元素时优先用 take_snapshot 而非 take_screenshot,因为快照提供交互工具所需的 uid;流程为 take_snapshot 获取页面结构,找到目标元素 uid,再调用 click(uid=...) 或 fill(uid=..., value=...)。排查错误时依次用 list_console_messages 查 JS 错误、list_network_requests 找失败(4xx/5xx)资源、evaluate_script 检查 DOM 或全局变量。性能剖析可用 performance_start_trace(reload=true, autoStop=true),等待加载完成后用 performance_analyze_insight 查找 LCP 或布局偏移问题。
适用场景:浏览器自动化操作、页面视觉检查、前端调试、网络请求分析、Core Web Vitals 与性能瓶颈分析、视口与网络/CPU 条件模拟。
限制与最佳实践:不确定当前活动标签页时应先运行 list_pages 和 select_page;重大导航或 DOM 变化后需重新获取快照,因为 uid 可能变化;wait_for 应设置合理超时以免卡在慢加载元素上;截图仅用于视觉验证,逻辑判断应依赖快照。资料未提供安装命令、收费与平台支持等细节。