chrome-devtools - SKILL.md Agent Skill

name: chrome-devtools description: "Control and inspect a live Chrome browser for UI testing, debugging, and performance analysis. Use when testing web applications, taking screenshots, inspecting DOM structure, checking console errors, or automating browser interactions."

Chrome DevTools

Use the chrome-devtools MCP tools to control and inspect a live Chrome browser.

Prerequisites

The chrome-devtools-mcp server must be configured for chrome-devtools tools to be available.

Auto-configuration

If chrome-devtools tools are not available, configure the MCP server automatically based on the environment:

VS Code / VS Code Insiders — Add to .vscode/mcp.json in the project (create the file if it doesn't exist, merge into existing config if it does):

{
  "servers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

After writing the config, tell the user to reload the window or restart the agent session for the MCP server to be picked up.

Copilot CLI — Add to ~/.copilot/mcp-config.json (create if it doesn't exist, merge into existing mcpServers if it does):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--headless"]
    }
  }
}

The server is available immediately after writing the config — no restart needed.

Manual installation (VS Code only)

Alternatively, the user can install it as a plugin:

Open VS Code Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Run Chat: Install Plugin From Source
Paste: https://github.com/ChromeDevTools/chrome-devtools-mcp

Core Workflow

Before interacting with a page

Navigate: navigate_page or new_page
Wait: wait_for to ensure content is loaded
Snapshot: take_snapshot to get page structure with element uids
Interact: Use uids from snapshot for click, fill, etc.

Tool selection

Automation/interaction: take_snapshot — text-based, faster, better for finding elements and verifying structure
Visual inspection: take_screenshot — when you need to see actual visual rendering (layout, colors, spacing, overlaps)
Data extraction: evaluate_script — for data not in the accessibility tree (computed styles, JS state, console errors)

Page management

list_pages to see available pages
select_page to switch context
Tools operate on the currently selected page

Efficient usage

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
You can send multiple tool calls in parallel, but maintain order: navigate → wait → snapshot → interact

Common checks

Layout issues: take_screenshot to visually verify element positioning, spacing, overflow
Accessibility: take_snapshot to verify semantic structure, ARIA labels, focus order
Console errors: evaluate_script with console.error monitoring
Responsive design: resize viewport with evaluate_script, then take_screenshot at different sizes
Interactive elements: click buttons, fill forms, verify state changes with take_snapshot
Performance: use tracing tools to identify slow interactions