chrome-devtools - SKILL.md Agent Skill

name: chrome-devtools description: >- Uses Chrome DevTools via MCP (--autoConnect mode, attaches to the user's running Chrome 144+). Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests.

Note: 本 skill は MCP サーバーが --autoConnect モード(既存 Chrome 144+ にアタッチ)で動いている前提。デフォルトの managed モードおよび --slim モードには適用されない。

Core Concepts

Browser lifecycle (autoConnect mode): The MCP server attaches to the user's already-running Chrome (144+) via the remote debugging endpoint. It does NOT launch a new browser instance. Prerequisites:

Chrome must already be running before the first MCP tool call
Remote debugging must be enabled at chrome://inspect/#remote-debugging
On the first connection attempt, the user must click "Allow" in Chrome's permission dialog
The MCP server has access to all open windows/tabs of the default profile

If list_pages returns an empty list, or new_page/navigate_page fails with connection errors, the user's Chrome is most likely not running or remote debugging is not enabled — invoke the sibling troubleshooting skill.

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

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 to look for
Snapshot: take_snapshot to understand page structure
Interact: Use element uids from the snapshot for click, fill, etc.

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

Tool selection

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

Parallel execution

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

autoConnect-specific safety

The MCP shares the user's real session: cookies, logins, open tabs are all visible to the agent. Treat sensitive tabs accordingly. Prefer take_snapshot on a specific page rather than enumerating all pages when working in a context with private tabs.
Avoid close_page on tabs you did not open — they may be the user's working tabs.

Testing an extension

Compatibility note: Extension tools (install_extension, list_extensions, etc.) require the --categoryExtensions flag on the MCP server. With Chrome 149+, --categoryExtensions is compatible with --autoConnect. With Chrome 144-148, extension tools require launching managed Chrome (i.e., dropping --autoConnect). If extension tools are missing, ask the user to confirm Chrome version and update the MCP config:
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect", "--categoryExtensions"]
    }
  }
}
After updating, the user must restart the MCP server (or AI client).

Install: Use install_extension with the path to the unpacked extension.
Identify: Get the extension ID from the response or by calling list_extensions.
Trigger Action: Use trigger_extension_action to open the popup or side panel if applicable.
Verify Service Worker: Use evaluate_script with serviceWorkerId to check extension state or trigger background actions.
Verify Page Behavior: Navigate to a page where the extension operates and use take_snapshot to check if content scripts injected elements or modified the page correctly.

Troubleshooting

If chrome-devtools-mcp is insufficient, guide the user to use Chrome DevTools UI directly:

If there are connection errors or list_pages failures, invoke the sibling troubleshooting skill.

Adapted from the official chrome-devtools-mcp skill (Apache-2.0, Copyright Google LLC). Modified for an autoConnect-only setup.