Browser Testing With Devtools

This connects Claude to Chrome DevTools via MCP so it can actually see what's happening in the browser instead of guessing. The agent can grab screenshots, inspect the DOM, read console errors, analyze network requests, and profile performance. Most useful when debugging UI issues or verifying that a fix actually works at runtime. The skill includes a solid security section that's worth reading: it treats all browser content as untrusted data and sets clear boundaries around JavaScript execution. The debugging workflows for UI bugs, network issues, and performance problems are practical and opinionated. Requires the chrome-devtools MCP server configured in your project.

Install to Claude Code

npx -y skills add addyosmani/agent-skills --skill browser-testing-with-devtools --agent claude-code