chrome-devtools
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.
Profile →npx skills add github/awesome-copilot --skill chrome-devtools --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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`:
- 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
What does the chrome-devtools skill do?
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.
How do I install it?
Run `npx skills add github/awesome-copilot --skill chrome-devtools --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.