chrome-devtools

Chrome DevTools Agent

概述

一项用于控制和检查实时 Chrome 浏览器的专用技能。该技能利用 chrome-devtools MCP 服务执行各种与浏览器相关的任务，从简单的页面导航到复杂的性能分析。

何时使用

在以下情况下使用该技能：

• 浏览器自动化：导航页面、点击元素、填写表单和处理对话框。
• 可视化检查：截取网页的截图或文本快照。
• 调试：检查控制台消息、在页面上下文中执行 JavaScript，以及分析网络请求。
• 性能分析：录制和分析性能追踪，以识别瓶颈和 Core Web Vitals 问题。
• 模拟：调整视口大小或模拟网络/CPU 条件。

工具类别

1. 导航与页面管理

• new_page：打开新标签页/页面。
• navigate_page：前往特定 URL、重新加载或导航历史记录。
• select_page：在已打开的页面之间切换上下文。
• list_pages：查看所有已打开的页面及其 ID。
• close_page：关闭特定页面。
• wait_for：等待特定文本出现在页面上。

2. 输入与交互

• click：点击某个元素（使用快照中的 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：识别元素（快照优先）

在查找元素时，始终优先使用 take_snapshot 而非 take_screenshot。快照提供的 uid 值是交互工具所必需的。

1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.

模式 B：排查错误

当页面出现故障时，同时检查控制台日志和网络请求。

1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.

模式 C：性能分析

找出页面运行缓慢的原因。

1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.

最佳实践

• 上下文感知：如果不确定当前哪个标签页处于活动状态，请始终运行 list_pages 和 select_page。
• 快照：在进行任何重大导航或 DOM 更改后，请重新获取快照，因为 uid 值可能会发生变化。
• 超时：为 wait_for 设置合理的超时时间，以避免在加载缓慢的元素上挂起。
• 截图：谨慎使用 take_screenshot 进行可视化验证，但在逻辑处理上依赖 take_snapshot。