Dev Tools Skill

Overview

Use the Chrome DevTools MCP server to diagnose and fix frontend issues by observing the live page, gathering evidence (console, network, performance), and proposing targeted code changes.

Quick Start

1. Confirm the user wants DevTools used (or they already asked).
2. Open the target page, then take an a11y snapshot.
3. Triage via console + network + quick DOM inspection.
4. Choose the appropriate workflow below and follow it end-to-end.
5. Summarize findings + propose the smallest safe fix.

Workflow Decision Tree

• UI/interaction bug (layout, hover/click, missing text): use UI/Interaction Workflow.
• Performance/lag (slow load, jank, long TTI): use Performance Workflow.
• API/network issue (failed fetch, wrong data): use Network Workflow.
• Runtime error (crash, blank screen, stack trace): use Console/Error Workflow.

Core Workflows