Chrome DevTools Agent

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

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