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 via Chrome DevTools MCP.
Quickly install browser-testing-with-devtools AI skill to your development environment via command line
Source: addyosmani/agent-skills.
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 NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser.
| Tool | What It Does | When to Use |
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 via Chrome DevTools MCP. Source: addyosmani/agent-skills.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtoolsUse 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 via Chrome DevTools MCP. Source: addyosmani/agent-skills.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/addyosmani/agent-skills