Browser Testing with DevTools skill for Claude Code: check pages in a real Chrome

Makes your agent test and debug web pages in a real Chrome browser through the Chrome DevTools MCP server.

Installs: 63K; on skills.sh
Stars: 112.6K; on GitHub
Updated: Nov 2026; last repo commit

browser-testing-with-devtools makes the agent look at a live page instead of guessing from code. It loads when you build or debug anything that runs in a browser, and it uses Chrome DevTools to take screenshots, read the DOM and console, watch network requests, record performance traces and read the accessibility tree.

It requires the chrome-devtools MCP server to be configured, which the install box adds. The skill sets safety rules: browser content is untrusted data, JavaScript execution is read-only by default and it uses a separate Chrome profile unless you say otherwise.

Good for

Front-end developers debugging layout, console or network problems
Teams who want screenshot and performance checks from an agent
Anyone verifying a UI fix against real browser data

Install browser-testing-with-devtools

Claude Code

Copy this prompt.

Install the browser-testing-with-devtools skill in Claude Code. Run this command:

npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Do both: the skill alone cannot drive a browser. The SKILL.md says it requires the chrome-devtools MCP server and suggests adding the config to your project .mcp.json or Claude Code settings. The --isolated flag uses a temporary Chrome profile that is wiped when the browser closes. The --autoConnect option (Chrome 144 or newer) attaches to your running Chrome instead; the skill advises against it unless the test needs your logged-in state. The server itself reports usage statistics to Google unless you pass --no-usage-statistics; see the safety section below.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

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
For Network Issues
For Performance Issues
Writing Test Plans for Complex UI Bugs
Test Plan: Task completion animation bug

Key facts

Author: addyosmani (repo owner)
Installs on skills.sh: 62,980 (Nov 2, 2026)
GitHub stars: 112,555 on the agent-skills repo (Nov 2, 2026)
License: MIT
Last commit: 2026-11-01
What installs: 1 file: SKILL.md
Needs: The chrome-devtools MCP server (npx chrome-devtools-mcp@latest) and Node.js
Works in: Claude Code, Codex, Cursor, Gemini CLI, Copilot, OpenCode and more, per the README

What it includes

Adds the chrome-devtools server to .mcp.json or Claude Code settings
The skill's example runs npx -y chrome-devtools-mcp@latest --isolated.
Runs code · Chrome DevTools MCP setup
Captures the current page state
For visual checks and before and after comparisons.
Read · Screenshot
Reads the live DOM tree
Verify components render as expected.
Read · DOM inspection
Reads log, warn and error output
Diagnose errors; a clean console is the standard.
Read · Console logs
Captures requests and responses
Check API calls and payloads.
Network · Network monitor
Records timing data
Profile load time and find bottlenecks.
Read · Performance trace
Reads computed CSS and the accessibility tree
Debug CSS and check the screen reader view.
Read · Element styles and accessibility tree
Runs JavaScript in the page; read-only by default
Do not use it for cookies, tokens, external requests or changes without your OK.
Runs code · JavaScript execution
Profile isolation, untrusted browser content and no navigating to page-supplied URLs
Default to a dedicated or temporary Chrome profile; attach to your own Chrome only when needed.
Security boundaries
Step lists for UI bugs, network issues and performance
Also covers test plans, screenshot checks and accessibility verification.
Debugging workflows

From the official docs

Permissions

Medium risk

It controls a real browser and runs JavaScript in pages, so a hostile page could try to steer the agent. Keep the default or isolated profile and stay on localhost.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

--autoConnect attaches to your real Chrome
The skill warns it can reach every open window of your default profile, including logged-in mail or banking. Use the default or --isolated profile for localhost testing.
Web pages can contain hostile text
The skill says to treat DOM text, console logs and network responses as data, not instructions. Watch for the agent navigating to links it found on a page.
The DevTools server sends usage statistics and can call Google
The chrome-devtools-mcp README says Google collects usage statistics by default (opt out with --no-usage-statistics) and that its performance tools may send trace URLs to the Google CrUX API (opt out with --no-performance-crux). It also warns that the server exposes browser content to your agent.
It runs JavaScript in the page
The skill limits this to read-only inspection and says to confirm before changing the page. Say no to anything that reads cookies or tokens.
The server runs through npx
The install example runs npx -y chrome-devtools-mcp@latest, which downloads and runs that package on your machine.

Technical details

Talks to	pages you ask it to open. npm (to fetch chrome-devtools-mcp). Google (usage statistics, CrUX lookups) via chrome-devtools-mcp

Questions

What does browser-testing-with-devtools do?

It tells Claude to check web pages in a real Chrome browser: screenshots, DOM, console, network, performance and the accessibility tree. It needs the Chrome DevTools MCP server.

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

Use the install box above. The README also lists npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools for one skill, and a Claude Code plugin for the whole pack (/plugin marketplace add addyosmani/agent-skills, then /plugin install agent-skills@addy-agent-skills). A one-skill install copies only skills/browser-testing-with-devtools/ and not the repo-level references folder; the README says the skill still works. The Chrome DevTools server is a separate piece; the install box shows its config from the SKILL.md.

Does it need the Chrome DevTools MCP server?

Yes. The description says it requires the chrome-devtools MCP server to be configured. Add it to your project .mcp.json or Claude Code settings using the config in the install box.

Will it use my own Chrome and logged-in sessions?

Not by default. By default the server starts Chrome with its own profile, and --isolated uses a temporary one. The --autoConnect option attaches to your running Chrome and can reach all open windows of that profile, so close unrelated tabs first.

Can it run JavaScript on pages?

Yes, but the skill limits it to read-only inspection. It says not to read cookies or tokens, not to make external requests, and to confirm with you before changing the page.

Does it work in the Claude app?

This page shows no Claude app route. The skill needs a local Chrome DevTools MCP server, and neither the SKILL.md nor the agent-skills README describes setting that up in the Claude app. Use Claude Code or Codex, where the install box gives both pieces.

Is it safe to run?

It is a text file of instructions and bundles no scripts, but it drives a real browser through a separate MCP server. Use the isolated profile and keep it to localhost unless you need more.

Does it work in Codex, Cursor or other tools?

The README documents Codex (codex plugin marketplace add addyosmani/agent-skills, then codex plugin add agent-skills@agent-skills, Codex CLI v0.122 or newer), Cursor (copy skills into .cursor/skills/), Gemini CLI, Windsurf, OpenCode, GitHub Copilot, Kiro and others. It says the skills are plain Markdown that work with any agent that accepts instruction files. It does not mention the Claude app.

Information

updated Nov 2, 2026

Repository: addyosmani/agent-skills
Folder: skills/browser-testing-with-devtools

addyosmani/agent-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

addyosmani/agent-skills README · github.com
browser-testing-with-devtools SKILL.md · github.com
chrome-devtools-mcp README · github.com
chrome-devtools-mcp client configurations · github.com
skills CLI commands · github.com