browser-testing-with-devtools
An agent skill by addyosmani, from addyosmani/agent-skills. Tags: debugging, developer-tools, mcp, visual-art, web.
What it does
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 the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add addyosmani/agent-skills --skill browser-testing-with-devtoolsOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/addyosmani/agent-skills
cp -r agent-skills/skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtoolsSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- addyosmani/agent-skills (all skills from this repository)
- Path
- skills/browser-testing-with-devtools/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- chrome-mcp-troubleshooting — Diagnose and fix Claude in Chrome MCP extension connectivity issues.
- debugging-and-error-recovery — Guides systematic root-cause debugging.
- frontend-ui-engineering — Builds production-quality, accessible, responsive user-facing UIs.
- observability-and-instrumentation — Instruments code so production behavior is visible and diagnosable. Use when adding logging, metrics, tracing, or alerting.
- performance-optimization — Optimizes application performance across frontend, backend, queries, and databases.
- security-and-hardening — Hardens code against vulnerabilities.