browser-testing-with-devtools
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
Install
With your agent
Install OMGSkills skill "addyosmani/agent-skills:browser-testing-with-devtools" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/addyosmani/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtoolsFrom README
Browser Testing with DevTools Overview Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it. When to Use Building or modifying anything that renders in a browser Debugging UI issues (layout, styling, interaction) Diagnosing console errors or warnings Analyzing network requests and API responses Profiling performance (Core Web Vitals, paint timing, layout shifts) Verifying that a fix actually works in the browser Automated UI testing through the agent When NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser. Setting Up Chrome DevTools MCP Add the following to your project's .mcp.json or Claude Code settings: -y skips the npx confirmation.