Back to Agent Skills
Development & Testing
Browser Testing with DevTools
by Addy Osmani 78k GitHub stars
Use Chrome DevTools for live runtime inspection — network, console, performance, and DOM debugging during testing.
#devtools#debugging#browser#inspection
Claude Code Codex
Overview
This skill drives Chrome DevTools for live runtime inspection while verifying an app — examining network activity, console output, performance, and the DOM. It's for debugging what's actually happening in the browser, not just reading code.
What it is good for
- Inspecting network requests during a bug
- Profiling runtime performance
- Debugging console errors live
- Verifying DOM state in the browser
Install
Install in Claude Code
# Add the marketplace, then install the skill in Claude Code:
/plugin marketplace add addyosmani/agent-skills
/plugin install browser-testing-with-devtools
# Or install manually into ~/.claude/skills:
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtoolsExplore AI Tools
Discover the best AI tools that complement your skills
Read AI & Design Articles
Tips and trends in the world of design and AI
Related Skills
Development & Testing
MCP Builder
Guide the creation of Model Context Protocol servers to connect APIs and tools to AI agents.
Claude Code Codex
Development & Testing Superpowers
A core skills library of 20+ battle-tested, composable tools and workflows for everyday agent development tasks.
Claude Code Codex
Development & Testing Vercel React Best Practices
React and Next.js performance guidelines from Vercel Engineering — data fetching, bundle optimization, and rendering patterns.
Claude Code Codex