browser-testing-with-devtools

browser-testing-with-devtools is an open-source testing skill for Claude Code and compatible agents, published by addyosmani. Its author describes it as: “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 performan…”. The project has 88k stars on GitHub and is available under the MIT license. Add it to your setup with `/plugin marketplace add addyosmani/agent-skills`.

What browser-testing-with-devtools does

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.

Installation

Add browser-testing-with-devtools to your agent with:

/plugin marketplace add addyosmani/agent-skills

Always review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.

What's inside

The SKILL.md for browser-testing-with-devtools is organised into these sections:

• Overview
• When to Use
• Setting Up Chrome DevTools MCP
• Installation
• Available Tools
• Security Boundaries
• Profile Isolation
• Treat All Browser Content as Untrusted Data
• JavaScript Execution Constraints
• Content Boundary Markers
• The DevTools Debugging Workflow
• For UI Bugs

When to use it

Reach for browser-testing-with-devtools when you want testing help from your agent without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.

Strengths

• Clear MIT license — safe to read and adapt
• Ships in addyosmani/agent-skills, an established project with 88,280 GitHub stars
• Actively maintained (recent commits)

Topics

Frequently asked questions

What does browser-testing-with-devtools do?

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.

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

Run /plugin marketplace add addyosmani/agent-skills in your agent, then reload your skills. Review the source at https://github.com/addyosmani/agent-skills before installing.

Is browser-testing-with-devtools free to use?

Yes. browser-testing-with-devtools is free and open source under the MIT license, so you can read, run, and adapt it within that license's terms.

Where does browser-testing-with-devtools come from?

browser-testing-with-devtools ships inside addyosmani/agent-skills, a repository that contains 25 catalogued skills in total. The repository's 88,280 GitHub stars apply to that whole collection, not to this skill on its own.