inspect-in-devtools

---
name: inspect-in-devtools
description: Use this skill to connect to the Chrome DevTools UI for interactive debugging, UI/UX review, Q&A, showing elements/network requests/panels to the user, inspecting the user's current DevTools selection, and addressing or polling for DevTools UI comment threads.
---

# Debug, Review, and Q&A in DevTools

Use this skill to:

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

## 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`.

## Workflows

### 1. Open DevTools

Call `open_devtools` with `pageId`. Do this before you call `reveal_in_devtools`, `get_devtools_comments`, or `resolve_devtools_comment`.

### 2. Reveal a panel, element, or network request

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.

### 3. Inspect the user's selection

- **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.

### 4. Handle comment threads

Select the mode from the user's request.

#### Mode A: One-shot (comments already exist)

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

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

#### Mode B: Watch (wait for user feedback)

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

1. Call `get_devtools_comments` immediately.
2. 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.
3. Stop after 12 consecutive empty polls (about 2 minutes) or when the user asks you to stop.
4. 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.

#### Process and resolve a thread

For each `### Thread: <id>`:

1. **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.
2. **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.
3. **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.