inspect-in-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Debug, Review, and Q&A in DevTools

在 DevTools 中调试、评审与问答

Use this skill to:

Show a target to the user: Open DevTools and reveal a panel, a DOM element, or a network request.
Inspect the user's selection: Read the element or network request that the user selected in DevTools.
Address DevTools comments: Fetch comment threads, answer questions or apply fixes, and resolve the threads.

使用此 skill 可以：

向用户展示目标：打开 DevTools，并显示特定面板、DOM 元素或网络请求。
检查用户的选择：读取用户在 DevTools 中选择的元素或网络请求。
处理 DevTools 评论：获取评论线程、回答问题或应用修复，并解决这些线程。

Prerequisites

前置条件

Chrome version: Chrome M159 or later.

Required flag:

--devtools-comments

in the MCP server config. Without it,

open_devtools

reveal_in_devtools

get_devtools_comments

, and

resolve_devtools_comment

are not available.

Headed browser: Chrome must not run in
```
--headless
```
mode.
Page targeting: All tools require a
```
pageId
```
from
```
list_pages
```
or
```
new_page
```
.

Chrome 版本：Chrome M159 或更高版本。
必需的 flag：在 MCP server 配置中使用
```
--devtools-comments
```
。如果不使用此 flag，则无法使用
```
open_devtools
```
、
```
reveal_in_devtools
```
、
```
get_devtools_comments
```
和
```
resolve_devtools_comment
```
。
有界面浏览器：Chrome 不得在
```
--headless
```
模式下运行。
页面定位：所有工具都需要一个来自
```
list_pages
```
或
```
new_page
```
的
```
pageId
```
。

Workflows

工作流

1. Open DevTools

1. 打开 DevTools

Call

open_devtools

with

pageId

. Do this before you call

reveal_in_devtools

get_devtools_comments

, or

resolve_devtools_comment

使用

pageId

调用

open_devtools

。在调用

reveal_in_devtools

、

get_devtools_comments

或

resolve_devtools_comment

之前，必须先执行此操作。

2. Reveal a panel, element, or network request

2. 显示面板、元素或网络请求

Call

reveal_in_devtools

with

pageId

and these optional parameters:

panelName

"elements"

"network"

"sources"

, or

"console"

. Pass it alone to switch panels.

```
uid
```
: Element
```
uid
```
from
```
take_snapshot
```
. Reveals the element in the Elements panel.
```
reqid
```
: Request
```
reqid
```
from
```
list_network_requests
```
. Reveals the request in the Network panel.

uid

and

reqid

are mutually exclusive.

使用

pageId

调用

reveal_in_devtools

，并根据需要传入以下可选参数：

```
panelName
```
：
```
"elements"
```
、
```
"network"
```
、
```
"sources"
```
或
```
"console"
```
。仅传入此参数即可切换面板。
```
uid
```
：来自
```
take_snapshot
```
的元素
```
uid
```
。在 Elements 面板中显示该元素。
```
reqid
```
：来自
```
list_network_requests
```
的请求
```
reqid
```
。在 Network 面板中显示该请求。

uid

和

reqid

互斥。

3. Inspect the user's selection

3. 检查用户的选择

DOM element: Call
```
take_snapshot
```
. The snapshot marks the element selected in the Elements panel. Pass its
```
uid
```
to
```
get_css_styles
```
,
```
take_screenshot
```
, or
```
evaluate_script
```
.
Network request: Call
```
get_network_request
```
and omit
```
reqid
```
. It returns the request selected in the Network panel.

DOM 元素：调用
```
take_snapshot
```
。快照会标记用户在 Elements 面板中选择的元素。将其
```
uid
```
传给
```
get_css_styles
```
、
```
take_screenshot
```
或
```
evaluate_script
```
。
网络请求：调用
```
get_network_request
```
，并省略
```
reqid
```
。该工具会返回用户在 Network 面板中选择的请求。

4. Handle comment threads

4. 处理评论线程

Select the mode from the user's request.

根据用户请求选择模式。

Mode A: One-shot (comments already exist)

模式 A：一次性处理（评论已存在）

Use this mode when the user says the comments are already in DevTools, or asks you not to poll.

Call
```
get_devtools_comments
```
once.
Process and resolve each returned thread.
Summarize your changes and answers in chat, then end your turn. Do not poll.

当用户表示评论已存在于 DevTools 中，或要求不要轮询时，使用此模式。

调用一次
```
get_devtools_comments
```
。
处理并解决每个返回的线程。
在聊天中总结所做的修改和回答，然后结束当前轮次。不要轮询。

Mode B: Watch (wait for user feedback)

模式 B：持续监听（等待用户反馈）

Use this mode when the user asks you to wait while they debug, review, or add comments.

Call
```
get_devtools_comments
```
immediately.
While the result is
```
"No open DevTools comments found."
```
, wait 10 seconds, then call it again. Call it immediately if a
```
"DevTools comment threads updated"
```
notification arrives.
Stop after 12 consecutive empty polls (about 2 minutes) or when the user asks you to stop.
When threads appear, process and resolve them. Then reset the empty-poll counter and continue polling.

Rules for polling:

Use a background sub-agent when sub-agent tools are available, so the main thread stays responsive. The sub-agent returns the threads to the main agent, or resolves them itself if it has workspace and MCP tools.
Poll inline only when sub-agent tools are unavailable. Do not end your turn early.
Never call
get_devtools_comments
back-to-back without the 10-second delay.

当用户要求在调试、评审或添加评论期间等待时，使用此模式。

立即调用
```
get_devtools_comments
```
。
当结果为
```
"No open DevTools comments found."
```
时，等待 10 秒后再次调用。如果收到
```
"DevTools comment threads updated"
```
通知，则立即调用。
连续 12 次轮询均无结果后停止（约 2 分钟），或在用户要求停止时停止。
线程出现后，处理并解决这些线程。然后重置空轮询计数器，并继续轮询。

轮询规则：

使用后台 sub-agent：如果 sub-agent 工具可用，应使用后台 sub-agent，使主线程保持响应。sub-agent 可以将线程返回给主 Agent，或者在拥有 workspace 和 MCP 工具时自行解决线程。
仅在没有 sub-agent 工具时内联轮询。不要提前结束当前轮次。
绝不能在没有 10 秒延迟的情况下连续调用
```
get_devtools_comments
```
。

Process and resolve a thread

处理并解决线程

For each

### Thread: <id>

Inspect the anchored target:

Related element uid

: Use

get_css_styles

take_snapshot

, or

take_screenshot

with the

uid

Related network reqid

: Use

get_network_request

with the

reqid

Optionally call
```
reveal_in_devtools
```
to show the target to the user.

Address the comment:
- For a code or styling request, apply the fix in the workspace. Reload and verify the page if needed.
- For a question or root-cause investigation, collect diagnostic data. Do not make unnecessary code edits.
Resolve: Call
```
resolve_devtools_comment
```
with
```
pageId
```
,
```
threadId
```
, and
```
replyText
```
:
- For a question or root cause, write a detailed answer.
- For a straightforward fix, write 1–2 sentences that state the change and the file.

对于每个

### Thread: <id>

：

检查锚定目标：
- 关联元素 uid：使用
```
uid
```
  调用
```
get_css_styles
```
  、
```
take_snapshot
```
  或
```
take_screenshot
```
  。
- 关联网络请求 reqid：使用
```
reqid
```
  调用
```
get_network_request
```
  。
- 可以选择调用
```
reveal_in_devtools
```
  ，向用户显示目标。
处理评论：
- 对于代码或样式修改请求，在 workspace 中应用修复。如有需要，重新加载并验证页面。
- 对于问题解答或根因调查，收集诊断数据。不要进行不必要的代码修改。
解决线程：使用
```
pageId
```
、
```
threadId
```
和
```
replyText
```
调用
```
resolve_devtools_comment
```
：
- 对于问题或根因，写出详细答案。
- 对于简单修复，用 1–2 句话说明所做的修改及相关文件。