chrome-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome DevTools Agent

Overview

概述

A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the

chrome-devtools

MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.

这是一个用于控制和检查实时Chrome浏览器的专用技能。该技能借助

chrome-devtools

MCP服务器执行各类浏览器相关任务，从简单的页面导航到复杂的性能剖析。

When to Use

使用场景

Use this skill when:

Browser Automation: Navigating pages, clicking elements, filling forms, and handling dialogs.
Visual Inspection: Taking screenshots or text snapshots of web pages.
Debugging: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.
Performance Analysis: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.
Emulation: Resizing the viewport or emulating network/CPU conditions.

在以下场景中使用此技能：

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

Tool Categories

工具分类

1. Navigation & Page Management

1. 导航与页面管理

```
new_page
```
: Open a new tab/page.
```
navigate_page
```
: Go to a specific URL, reload, or navigate history.
```
select_page
```
: Switch context between open pages.
```
list_pages
```
: See all open pages and their IDs.
```
close_page
```
: Close a specific page.
```
wait_for
```
: Wait for specific text to appear on the page.

```
new_page
```
：打开新标签页/页面。
```
navigate_page
```
：跳转到指定URL、刷新页面或浏览历史记录。
```
select_page
```
：在多个已打开页面之间切换上下文。
```
list_pages
```
：查看所有已打开页面及其ID。
```
close_page
```
：关闭指定页面。
```
wait_for
```
：等待页面上出现指定文本。

2. Input & Interaction

2. 输入与交互

```
click
```
: Click on an element (use
```
uid
```
from snapshot).
```
fill
```
/
```
fill_form
```
: Type text into inputs or fill multiple fields at once.
```
hover
```
: Move the mouse over an element.
```
press_key
```
: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").
```
drag
```
: Drag and drop elements.
```
handle_dialog
```
: Accept or dismiss browser alerts/prompts.
```
upload_file
```
: Upload a file through a file input.

```
click
```
：点击元素（使用快照中的
```
uid
```
）。
```
fill
```
/
```
fill_form
```
：在输入框中输入文本或批量填写多个字段。
```
hover
```
：将鼠标悬停在元素上。
```
press_key
```
：发送键盘快捷键或特殊按键（例如 "Enter"、"Control+C"）。
```
drag
```
：拖放元素。
```
handle_dialog
```
：接受或关闭浏览器警告/提示框。
```
upload_file
```
：通过文件输入框上传文件。

3. Debugging & Inspection

3. 调试与检查

```
take_snapshot
```
: Get a text-based accessibility tree (best for identifying elements).
```
take_screenshot
```
: Capture a visual representation of the page or a specific element.

list_console_messages

get_console_message

: Inspect the page's console output.

```
evaluate_script
```
: Run custom JavaScript in the page context.
```
list_network_requests
```
/
```
get_network_request
```
: Analyze network traffic and request details.

```
take_snapshot
```
：获取基于文本的可访问性树（最适合识别元素）。
```
take_screenshot
```
：捕获整个页面或指定元素的视觉截图。

list_console_messages

get_console_message

：检查页面的控制台输出。

```
evaluate_script
```
：在页面上下文中运行自定义JavaScript。

list_network_requests

get_network_request

：分析网络流量和请求详情。

4. Emulation & Performance

4. 模拟与性能

```
resize_page
```
: Change the viewport dimensions.
```
emulate
```
: Throttling CPU/Network or emulating geolocation.
```
performance_start_trace
```
: Start recording a performance profile.
```
performance_stop_trace
```
: Stop recording and save the trace.
```
performance_analyze_insight
```
: Get detailed analysis from recorded performance data.

```
resize_page
```
：更改视口尺寸。
```
emulate
```
：限制CPU/网络速度或模拟地理位置。
```
performance_start_trace
```
：开始记录性能分析数据。
```
performance_stop_trace
```
：停止记录并保存追踪数据。
```
performance_analyze_insight
```
：从已记录的性能数据中获取详细分析结果。

Workflow Patterns

工作流模式

Pattern A: Identifying Elements (Snapshot-First)

模式A：元素识别（先获取快照）

Always prefer

take_snapshot

over

take_screenshot

for finding elements. The snapshot provides

uid

values which are required by interaction tools.

markdown

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=...)`.

查找元素时，始终优先使用

take_snapshot

而非

take_screenshot

。快照提供的

uid

值是交互工具所需的关键参数。

markdown

1. `take_snapshot` 获取当前页面结构。
2. 找到目标元素的`uid`。
3. 使用`click(uid=...)`或`fill(uid=..., value=...)`。

Pattern B: Troubleshooting Errors

模式B：错误排查

When a page is failing, check both console logs and network requests.

markdown

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.

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

markdown

1. `list_console_messages` 检查JavaScript错误。
2. `list_network_requests` 识别失败（4xx/5xx状态码）的资源。
3. `evaluate_script` 检查特定DOM元素或全局变量的值。

Pattern C: Performance Profiling

模式C：性能剖析

Identify why a page is slow.

markdown

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.

识别页面加载缓慢的原因。

markdown

1. `performance_start_trace(reload=true, autoStop=true)`
2. 等待页面加载/追踪完成。
3. `performance_analyze_insight` 查找LCP问题或布局偏移。

Best Practices

最佳实践

Context Awareness: Always run
```
list_pages
```
and
```
select_page
```
if you are unsure which tab is currently active.
Snapshots: Take a new snapshot after any major navigation or DOM change, as
```
uid
```
values may change.
Timeouts: Use reasonable timeouts for
```
wait_for
```
to avoid hanging on slow-loading elements.
Screenshots: Use
```
take_screenshot
```
sparingly for visual verification, but rely on
```
take_snapshot
```
for logic.

上下文感知：如果不确定当前激活的是哪个标签页，务必先运行
```
list_pages
```
和
```
select_page
```
。
快照更新：在任何重大导航或DOM变更后重新获取快照，因为
```
uid
```
值可能会发生变化。
超时设置：为
```
wait_for
```
设置合理的超时时间，避免因元素加载缓慢导致任务挂起。
截图使用：仅在需要视觉验证时谨慎使用
```
take_screenshot
```
，逻辑操作依赖
```
take_snapshot
```
即可。