What problem does it solve? Static code analysis cannot reveal what actually happens at runtime in a browser. This Skill gives an AI agent live visibility into the browser so it can inspect the DOM, read console errors, analyze network requests, and verify visual output instead of guessing. ## Core Features & Use Cases - Live Browser Inspection: Capture screenshots, read the DOM tree, computed styles, and the accessibility tree through the Chrome DevTools MCP server. - Structured Debugging Workflows: Follow step-by-step flows for UI bugs, network failures, and performance profiling (LCP, CLS, INP, long tasks). - Security Boundaries: Enforces rules for profile isolation, treating browser content as untrusted data, and read-only JavaScript execution to prevent prompt injection from page content. - Use Case: A React task list shows a broken completion animation. The agent navigates to localhost, reproduces the bug, checks the console and network PATCH requests, takes before/after screenshots, and verifies the fix in the same session. ## Quick Start Set up the chrome-devtools MCP server in your project, then ask the agent to open your local dev page, reproduce the UI bug, and report console errors, network activity, and a screenshot.
