SkillHub

Skills github awesome-copilot

chrome-devtools

Use it when:
You want the agent to work in a real Chrome page: click through it, read its console and network traffic, or find out why it's slow.
It does:
Maps the chrome-devtools MCP server's tools for pages, input, inspection, emulation and performance tracing, with three worked patterns.
Needs:
The chrome-devtools MCP server connected to your agent.
Snapshot first:
It finds elements in a text accessibility tree, whose element IDs the click and fill tools need, and keeps screenshots for visual checks.
Patterns:
Act on an element, troubleshoot a broken page from console and network errors, and profile a slow load for LCP and layout shifts.

TL;DR

A reference for the chrome-devtools MCP server, which lets the agent control and inspect a live Chrome browser. It groups the server's tools into four sets: opening, navigating, switching, closing and waiting on pages; input, such as clicks, form filling, hovering, key presses, drag and drop, dialogs and file uploads; inspection, through accessibility snapshots, screenshots, console messages, JavaScript run in the page and network requests; and emulation and performance, from resizing the viewport and throttling CPU or network to recording a trace and analysing its insights. Three patterns show how they fit together. To act on an element, take a snapshot, find its uid and pass it to click or fill. To troubleshoot a failing page, list console messages for JavaScript errors and network requests for failed 4xx or 5xx resources, then evaluate a script to check DOM elements or globals. To profile a slow page, start a trace that reloads and stops itself, then analyse its insights for LCP (Largest Contentful Paint, when the main content shows) or layout shifts. It reminds the agent to check which tab is active, take a new snapshot after navigation because uids change, and keep waits to reasonable timeouts.

Summarizes the skill at 797337f.

npx skills add https://github.com/github/awesome-copilot --skill chrome-devtools

skills.sh pageSource on GitHubAll skills from github/awesome-copilot

Total Downloads
15,400 on skills.sh, Nov 9, 2026
Repo stars
40,943 github/awesome-copilot
First seen
Jan 23, 2026 on skills.sh
Weekly Downloads
52
-27% over the 8 weeks to Nov 9
Weekly values
Week toInstalls
Sep 2171
Sep 2892
Oct 591
Oct 1268
Oct 1971
Oct 2653
Nov 261
Nov 952
Category
category:browsercategory:debuggingcategory:software-engineering

Drive browsers, scrape pages and search the web.

Find root causes, review code and test what you built.

Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type
type:tool

Operates a CLI, API, app or bundled script to get something done.
Effect
effect:remote

Its own steps change something outside your machine: post, send, deploy, provision, file issues, drive a website, or upload data to a service.
Needs
needs:mcpneeds:browser

Needs an MCP server connected.

Drives a real Chromium or Chrome browser.
Publisher
by:official

A verified publisher on skills.sh, or the company or maintainer behind the product the skill operates.
Topics
browser-automationdebuggingperformance
Stack
stack:chrome-devtools

SKILL.md

From github/awesome-copilot at 797337f. Checked daily, last changed Nov 6, 2026.

Frontmatter
name: chrome-devtools
description: 'Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.'
license: MIT

Chrome DevTools Agent

Overview

A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the chrome-devtools MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.

When to Use

Use this skill when:

  • Browser Automation: Navigating pages, clicking elements, filling forms, and handling dialogs.
  • Visual Inspection: Taking screenshots or text snapshots of web pages.
  • Debugging: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.
  • Performance Analysis: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.
  • Emulation: Resizing the viewport or emulating network/CPU conditions.

Tool Categories

1. Navigation & Page Management
  • new_page: Open a new tab/page.
  • navigate_page: Go to a specific URL, reload, or navigate history.
  • select_page: Switch context between open pages.
  • list_pages: See all open pages and their IDs.
  • close_page: Close a specific page.
  • wait_for: Wait for specific text to appear on the page.
2. Input & Interaction
  • click: Click on an element (use uid from snapshot).
  • fill / fill_form: Type text into inputs or fill multiple fields at once.
  • hover: Move the mouse over an element.
  • press_key: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").
  • drag: Drag and drop elements.
  • handle_dialog: Accept or dismiss browser alerts/prompts.
  • upload_file: Upload a file through a file input.
3. Debugging & Inspection
  • take_snapshot: Get a text-based accessibility tree (best for identifying elements).
  • take_screenshot: Capture a visual representation of the page or a specific element.
  • list_console_messages / get_console_message: Inspect the page's console output.
  • evaluate_script: Run custom JavaScript in the page context.
  • list_network_requests / get_network_request: Analyze network traffic and request details.
4. Emulation & Performance
  • resize_page: Change the viewport dimensions.
  • emulate: Throttling CPU/Network or emulating geolocation.
  • performance_start_trace: Start recording a performance profile.
  • performance_stop_trace: Stop recording and save the trace.
  • performance_analyze_insight: Get detailed analysis from recorded performance data.

Workflow Patterns

Pattern A: Identifying Elements (Snapshot-First)

Always prefer take_snapshot over take_screenshot for finding elements. The snapshot provides uid values which are required by interaction tools.

1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.
Pattern B: Troubleshooting Errors

When a page is failing, check both console logs and network requests.

1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.
Pattern C: Performance Profiling

Identify why a page is slow.

1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.

Best Practices

  • Context Awareness: Always run list_pages and select_page if you are unsure which tab is currently active.
  • Snapshots: Take a new snapshot after any major navigation or DOM change, as uid values may change.
  • Timeouts: Use reasonable timeouts for wait_for to avoid hanging on slow-loading elements.
  • Screenshots: Use take_screenshot sparingly for visual verification, but rely on take_snapshot for logic.