Skip to content
Get packs

Chrome DevTools Browser Control

Lets an agent drive and inspect a live Chrome browser: navigate, click, debug, and profile performance.

Source Download skill
Repository
github/awesome-copilot
Stars
40,703
Licence
MIT
Files
1 file

What it does

This skill teaches an AI agent to control a real Chrome browser through the chrome-devtools MCP server (a connector that exposes browser controls as tools). Once installed, the agent can open and switch tabs, click buttons, fill forms, take screenshots and text snapshots of pages, read console errors, inspect network requests, run JavaScript in a page, resize the viewport, simulate slow networks or CPU, and record performance traces to find slow-loading issues. It also gives the agent a recommended order of steps for common jobs like finding page elements or troubleshooting failing pages.

Great for

  • Web developers debugging a page that loads slowly or throws errors
  • QA engineers who want an agent to walk through a website and check its behaviour
  • Anyone analysing Core Web Vitals or network failures on a live site

Skip it if

  • Scraping or automating sites you do not own or have permission to test, since the agent can act on logged-in accounts and forms (risk of unintended actions or policy breaches)
  • Users without the chrome-devtools MCP server set up, because the skill only gives instructions and cannot control a browser on its own
  • Tasks that need only static code changes, where this adds nothing

Try asking

  • “Open my staging site, take a snapshot, and fill in the signup form with test data”
  • “Check the console and failed network requests on the checkout page and tell me what is breaking”
  • “Record a performance trace of the homepage reload and explain the main LCP problem”
  • “Resize the viewport to mobile size and take a screenshot of the navigation menu”
Step-by-step guide: how to use Chrome DevTools Browser ControlInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    chrome-devtools.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip chrome-devtools.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip chrome-devtools.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a test or staging environment rather than a live account with real data
  • Ask the agent to run list_pages first so it knows which tab it is working in
  • Request screenshots sparingly; text snapshots are faster and better for finding elements

What's inside

  • SKILL.md

Redistributed unmodified from github/awesome-copilot under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.