dev-tools-skilllisted

# 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 ### 1) Triage (always first) - Capture state: `list_pages` → `select_page` → `take_snapshot`. - Scan for visible errors (missing sections, broken layout) in snapshot text. - Check console messages (`list_console_messages`, then `get_console_message` for details). - Check network requests (`list_network_requests`, then `get_network_request` for errors/slow calls). - Form a hypothesis and select a workflow below. ### 2) UI/Interaction Workflow - Use `take_snapshot` to locate the target element; if unclear, `take_screenshot`. - Inspect element text/attributes via `evaluate_script` (r