What problem does it solve? Static code analysis cannot reveal what actually happens when a page runs in a browser. This Skill gives the agent live visibility into the browser so it can inspect the DOM, read console errors, analyze network requests, and verify visual output with real runtime data instead of guessing. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM tree, computed styles, and the accessibility tree through Chrome DevTools MCP. - Runtime Diagnostics: Analyze console logs, network requests and responses, and performance traces including Core Web Vitals. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network issues, and performance regressions, with screenshot-based before/after verification. - Use Case: A task completion animation glitches in your app. The agent navigates to localhost, reproduces the bug, checks the console and network monitor for the PATCH request, diagnoses the root cause, applies the fix, and verifies with a clean console and matching screenshots. ## Quick Start Ask the agent to open your local dev server in Chrome DevTools MCP, reproduce the UI bug, and report console errors, network activity, and a screenshot of the broken state.
