Agent skill · software engineering · github
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.
Why this skill is useful
Adds specific commands and workflows for browser automation and performance analysis that the AI wouldn't reliably generate on its own.
What it needs
Requires chrome-devtools installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 newpage: Open a new tab/page. navigatepage: Go to a specific URL, reload, or navigate history. selectpage: Switch context between open pages. listpages: See all open pages and their IDs. closepage: Close a specific page. waitfor: Wait for specific text to appear on the page. 2. Input & Interaction click: Click on an element (use uid from snapshot). fill / fillform: Type text into inputs or fill multiple fields at once. hover: Move the mouse over an element. presskey: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C"). drag: Drag and drop elements. handledialog: Accept or dismiss browser alerts/prompts. uploadfile: Upload a file through a file input. 3. Debugging & Inspection takesnapshot: Get a text-based accessibility tree (best for identifying elements). takescreenshot: Capture a visual representation of the page or a specific element. listconsolemessages / getconsolemessage: Inspect the page's console output. evaluatescript: Run custom JavaScript in the page context. listnetworkrequests / getnetworkrequest: Analyze network traffic and request details. 4. Emulation & Performance resizepage: Change the viewport dimensions. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/chrome-devtools