chrome-devtools
Installation
Summary
Expert-level browser automation, debugging, and performance analysis via Chrome DevTools protocol.
- Four tool categories cover navigation, interaction, debugging, and performance profiling across 25+ commands
- Snapshot-first workflow provides element UIDs for reliable targeting; screenshots offer visual verification
- Network request inspection, console message analysis, and JavaScript evaluation support troubleshooting and validation
- Performance tracing with Core Web Vital analysis identifies bottlenecks; emulation tools test under throttled conditions
SKILL.md
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.