chrome-devtools Skill (github): Browser Control for Claude

Teaches Claude to drive a live Chrome browser: click and type, read console and network, take screenshots and profile page speed.

Installs: 15.3K; on skills.sh
Stars: 40.7K; on GitHub
Updated: Oct 2026; last repo commit

chrome-devtools is a usage guide for the chrome-devtools MCP server. It tells Claude which tool to call for navigation, input, debugging and performance traces, and which order works best: take a text snapshot first, then click by the element ID it returns.

The skill does nothing without that MCP server, so install both with the install box above. It bundles no scripts. See the Chrome DevTools MCP page for the server's own safety notes.

Good for

Developers debugging a page that fails in the browser
People who want Claude to fill forms or click through a site
Front-end teams chasing Core Web Vital problems

Install chrome-devtools

Claude Code

Copy this prompt.

Install the chrome-devtools skill in Claude Code. Run this command:

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js 20.19+.

Run steps 1 and 2 together, or use the plugin instead of both (not alongside them). The skill only tells Claude how to use the server. The server needs current stable Chrome. The server's own README ships a chrome-devtools skill and says skills describe one server version, so an outdated copy can name tools or parameters that changed. The plugin route installs the server and the README's skills together.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

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.

Sections in SKILL.md

Overview
When to Use
Tool Categories
1. Navigation & Page Management
2. Input & Interaction
3. Debugging & Inspection
4. Emulation & Performance
Workflow Patterns
Pattern A: Identifying Elements (Snapshot-First)
Pattern B: Troubleshooting Errors
Pattern C: Performance Profiling
Best Practices

Key facts

Author: github (repo owner)
Repo: github/awesome-copilot
Installs on skills.sh: 15,331
Repo stars: 40,666
License: MIT
Last repo commit: 2026-10-30
Files in the skill folder: 1 file including SKILL.md
Needs: the chrome-devtools MCP server

What it includes

new_page, navigate_page, select_page, list_pages, close_page, wait_for
Open, switch between and close tabs, go to a URL, and wait for text to appear.
Network · Navigation & Page Management
click, fill, fill_form, hover, press_key, drag, handle_dialog, upload_file
Clicks elements by their snapshot ID, types into fields, sends key presses, drags, answers dialogs and uploads a file through a file input.
Write · Input & Interaction
take_snapshot, take_screenshot, console messages, evaluate_script, network requests
Reads the page as a text tree, captures images, lists console output and network traffic, and runs JavaScript in the page.
Runs code · Debugging & Inspection
resize_page, emulate, performance trace start, stop and analyze
Changes the viewport, throttles CPU or network, emulates geolocation, and records a trace to find LCP and layout shift problems.
Emulation & Performance
Snapshot first, then act by uid
Prefer take_snapshot over take_screenshot for finding elements, and take a new snapshot after major page changes.
Pattern A: Identify elements
Console, then network, then evaluate_script
Check JavaScript errors, find failed 4xx and 5xx requests, then inspect DOM values.
Pattern B: Troubleshoot errors
Trace with reload, then analyze insights
Starts a trace with reload and auto-stop, waits, and asks for insights on LCP and layout shifts.
Pattern C: Profile performance

From the official docs

Permissions

Medium risk

The skill lets Claude control a live Chrome, including clicking, typing, uploading files and running JavaScript in a page. Use a separate browser profile and keep it away from accounts you are signed into.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Claude can click, type and upload in the browser
The listed tools include click, fill, fill_form, press_key, handle_dialog and upload_file. Use a separate Chrome profile and stay out of signed-in accounts you care about. github.com
It can run JavaScript inside a page
evaluate_script runs custom JavaScript in the page context, and the network tools expose request details. Treat what a page returns as untrusted text. github.com
The server's own notes apply
The server README says it exposes browser content to the client so it can inspect, debug and modify any data in the browser, and advises against sharing sensitive information. Google collects usage statistics by default (opt out with --no-usage-statistics), and performance tools may send trace URLs to the Google CrUX API (disable with --no-performance-crux). These belong to the MCP server, not this skill. github.com

Technical details

Talks to	Any site you ask Claude to open in the controlled Chrome. Usage statistics to Google and trace URLs to the CrUX API, per the server README

Questions

What does the chrome-devtools skill do?

It teaches Claude how to use the chrome-devtools MCP server: which tools to call for navigation, input, debugging and performance traces, and in what order.

Does the skill work without the MCP server?

No. The SKILL.md says it uses the chrome-devtools MCP server. The install box installs the server and the skill together.

Why snapshot instead of screenshot?

The skill says snapshots give the uid values that click and fill need, and tells Claude to use screenshots sparingly for visual checks.

Can it profile page speed?

Yes. Pattern C starts a performance trace with reload, then asks for insights on issues such as LCP and layout shifts.

Does it work in the Claude app?

This page stores no Claude app install, because the MCP server runs on your own computer through npx.

Is it safe to install?

It bundles no scripts, but it hands Claude a real browser. Claude can click, type, upload files and run JavaScript in pages. Use a separate profile, and read the Chrome DevTools MCP page for the server's safety notes.

Where does it come from?

It sits in the github/awesome-copilot repo, with an MIT license in its frontmatter.

Is there an official version of this skill?

The Chrome DevTools MCP README lists its own chrome-devtools skill, shipped with the server package and plugin. This page covers the copy in github/awesome-copilot, which has 1 file. If you install the server plugin, you get the README's skills instead.

Information

updated Nov 2, 2026

Repository: github/awesome-copilot
Folder: skills/chrome-devtools

github/awesome-copilot skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

chrome-devtools SKILL.md · github.com
Chrome DevTools MCP repository · github.com
README.md · github.com