browser-testing-with-devtools — Skills

What it does

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

Requirements & configuration

Default to the dedicated profile (no connect flags) or --isolated. Testing localhost almost never needs your real sessions.

| "I need to read localStorage to debug this" | Credential material is off-limits. Inspect application state through non-sensitive variables instead. |

Agent attached to the user's daily Chrome profile (logged-in sessions) for tests that only need localhost

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.

Source

Repository: https://github.com/addyosmani/agent-skills

browser-testing-with-devtools FAQ

What does the browser-testing-with-devtools skill do?

What does browser-testing-with-devtools require?

Default to the dedicated profile (no connect flags) or --isolated. Testing localhost almost never needs your real sessions. | "I need to read localStorage to debug this" | Credential material is off-limits. Inspect application state through non-sensitive variables instead. | Agent attached to the user's daily Chrome profile (logged-in sessions) for tests that only need localhost

How do I install browser-testing-with-devtools?

Run: npx -y skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools --agent claude-code — the source lives at github.com/addyosmani/agent-skills.

Maintain browser-testing-with-devtools?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![browser-testing-with-devtools on getagentictools](https://getagentictools.com/badge/skills/addyosmani-agent-skills-browser-testing-with-devtools.svg)](https://getagentictools.com/skills/addyosmani-agent-skills-browser-testing-with-devtools?ref=badge)

npx agentictools info skills/addyosmani-agent-skills-browser-testing-with-devtools

The second line is the CLI lookup for this page — handy in READMEs and docs.