What problem does it solve? Static code analysis cannot reveal what actually happens at runtime in a browser. This Skill gives the agent live visibility into the browser so UI bugs, console errors, network failures, and performance issues are verified with real runtime data instead of guesswork. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM, inspect computed styles, and read the accessibility tree through Chrome DevTools MCP. - Console, Network, and Performance Analysis: Diagnose console errors, verify API request/response payloads, and record performance traces covering LCP, CLS, and INP. - Structured Debugging Workflows: Follow reproduce-inspect-diagnose-fix-verify 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, identifies the root cause, applies the fix, and verifies with a clean console and a comparison screenshot. ## Quick Start Use the browser testing skill to open my app on localhost:3000, reproduce the layout bug on the tasks page, and check the console and network requests for errors.
