chrome-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Core Concepts

核心概念

Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration:

npx chrome-devtools-mcp@latest --help

Page selection: Tools operate on the currently selected page. Use

list_pages

to see available pages, then

select_page

to switch context.

Element interaction: Use

take_snapshot

to get page structure with element

uid

s. Each element has a unique

uid

for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.

浏览器生命周期：首次调用工具时会自动启动浏览器，使用持久化Chrome配置文件。可在MCP服务器配置中通过CLI参数进行配置：

npx chrome-devtools-mcp@latest --help

。

页面选择：工具作用于当前选中的页面。使用

list_pages

查看可用页面，然后使用

select_page

切换上下文。

元素交互：使用

take_snapshot

获取包含元素

uid

的页面结构。每个元素都有唯一的

uid

用于交互。如果未找到元素，请重新获取快照——该元素可能已被移除或页面已发生变化。

Workflow Patterns

工作流模式

Before interacting with a page

与页面交互前

Navigate:
```
navigate_page
```
or
```
new_page
```
Wait:
```
wait_for
```
to ensure content is loaded if you know what you look for.
Snapshot:
```
take_snapshot
```
to understand page structure
Interact: Use element
```
uid
```
s from snapshot for
```
click
```
,
```
fill
```
, etc.

导航：使用
```
navigate_page
```
或
```
new_page
```
等待：如果明确目标内容，使用
```
wait_for
```
确保内容加载完成。
快照：使用
```
take_snapshot
```
了解页面结构
交互：使用快照中的元素
```
uid
```
执行
```
click
```
、
```
fill
```
等操作。

Efficient data retrieval

高效数据获取

Use
```
filePath
```
parameter for large outputs (screenshots, snapshots, traces)
Use pagination (
```
pageIdx
```
,
```
pageSize
```
) and filtering (
```
types
```
) to minimize data
Set
```
includeSnapshot: false
```
on input actions unless you need updated page state

对于大体积输出（截图、快照、追踪日志），使用
```
filePath
```
参数
使用分页（
```
pageIdx
```
、
```
pageSize
```
）和过滤（
```
types
```
）来减少数据量
除非需要更新页面状态，否则在输入操作中设置
```
includeSnapshot: false
```

Tool selection

工具选择

Automation/interaction:
```
take_snapshot
```
(text-based, faster, better for automation)
Visual inspection:
```
take_screenshot
```
(when user needs to see visual state)
Additional details:
```
evaluate_script
```
for data not in accessibility tree

自动化/交互：
```
take_snapshot
```
（基于文本，速度更快，更适合自动化场景）
视觉检查：
```
take_screenshot
```
（当用户需要查看视觉状态时使用）
额外信息获取：使用
```
evaluate_script
```
获取无障碍树中未包含的数据

Parallel execution

并行执行

You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.

你可以并行发送多个工具调用，但需保持正确顺序：导航 → 等待 → 快照 → 交互。

Troubleshooting

故障排查

chrome-devtools-mcp

is insufficient, guide users to use Chrome DevTools UI:

如果

chrome-devtools-mcp

功能不足，引导用户使用Chrome DevTools UI：