# browser-testing-with-devtools

> Claude/Codex skill by [@addyosmani](https://omgskills.com/library/addyosmani/index.md) · 86k stars · Updated 2026-08-08

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.

Tags: agent-skills, antigravity, claude-code, codex, cursor, skills

## Install

```sh
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-devtools
```

## From 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.

## Links

- HTML page: https://omgskills.com/skills/addyosmani/agent-skills/browser-testing-with-devtools/
- GitHub: https://github.com/addyosmani/agent-skills
- Author: [@addyosmani](https://omgskills.com/library/addyosmani/index.md)

## More from this repo

- [api-and-interface-design](https://omgskills.com/skills/addyosmani/agent-skills/skills/api-and-interface-design/index.md) — Guides stable API and interface design.
   - [@addyosmani](https://omgskills.com/library/addyosmani/index.md) · 93k stars
- [constraint-driven-development](https://omgskills.com/skills/addyosmani/agent-skills/skills/constraint-driven-development/index.md) — Establishes a project's quality bar as a written contract and stops agents quietly lowering it.
   - [@addyosmani](https://omgskills.com/library/addyosmani/index.md) · 91k stars
- [doubt-driven-development](https://omgskills.com/skills/addyosmani/agent-skills/skills/doubt-driven-development/index.md) — Subjects every non-trivial decision to a fresh-context adversarial review before it stands.
   - [@addyosmani](https://omgskills.com/library/addyosmani/index.md) · 87k stars