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.
Before you install
- Last update
- Files in folder
- 1
- Scripts
- No script files found
- SKILL.md size
- 14 KB (about 3,635 tokens of context each time it loads)
- License
- MIT
- Source on GitHub
- addyosmani/agent-skills
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Install
npx skills add addyosmani/agent-skills@browser-testing-with-devtoolsRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add addyosmani/agent-skills@browser-testing-with-devtools --agent claude-code -y- Project install writes to
.claude/skills/browser-testing-with-devtools- Global install writes to
~/.claude/skills/browser-testing-with-devtools
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /browser-testing-with-devtools.
What it does
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…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
Categories
Related skills
- code-review-and-quality
addyosmani/agent-skills
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch. Use when asked to review a diff or a pull request, even when the diff is pasted inline.
- security-and-hardening
addyosmani/agent-skills
Hardens code against vulnerabilities. Use when auditing an input handler for vulnerabilities, when handling user input, authentication, data storage, or external integrations, or when checking a login flow is safe against the OWASP Top Ten. Use when building any feature that accepts untrusted data, manages user sessions, or interacts with third-party services. Use when auditing dependencies for known vulnerabilities, triaging package-manager audit findings, or assessing supply-chain risk in a new package. Use when personal data or privacy compliance (GDPR, CCPA) is involved.
- frontend-ui-engineering
addyosmani/agent-skills
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
- spec-driven-development
addyosmani/agent-skills
Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet. Use when drafting a PRD or requirements document with objectives and scope, or when requirements are unclear, ambiguous, or only exist as a vague idea. Use when a single requirement spans several independently testable capabilities and needs decomposing into a capability map of modules before specifying.
- performance-optimization
addyosmani/agent-skills
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
58K installs 108K - planning-and-task-breakdown
addyosmani/agent-skills
Breaks work into ordered tasks. Use when you have a spec or clear requirements and need to break work into implementable tasks. Use when a task feels too large to start, when you need to estimate scope, or when parallel work is possible.