Addy Osmani Browser Testing with DevTools

Inspects a live page through Chrome DevTools MCP: DOM, console, network, and performance.

How it works

Foe: Bug Slime, a defect in your code.

Foes

Bug Slime

Party · Context

HunterYour agent100/100

Bug Slime
The Bug Slime blocks the way.
What really happensIt stands for a defect in your code.
Hunter: Context 100/100.
Regress
The Bug Slime uses Regress.
What really happensA fix in one place breaks something that used to work.
Hunter takes 8. Hunter: Context 92/100.
Addy Osmani Browser Testing with DevTools
The hero unrolls the DevTools scroll before trusting the page.
What really happensThe agent loads browser-testing-with-devtools when the change runs in a browser. It needs the chrome-devtools MCP server.
Bug Slime takes 14.
Addy Osmani Browser Testing with DevTools
A side portal opens into an isolated Chrome.
What really happensChrome DevTools MCP starts as npx -y chrome-devtools-mcp@latest --isolated, a temp profile wiped when the browser closes.
Bug Slime takes 25.
Regress
The Bug Slime uses Regress.
Hunter takes 8. Hunter: Context 84/100.
Addy Osmani Browser Testing with DevTools
A sweep reads the live DOM, console, and network.
What really happensIt can screenshot, read the DOM and accessibility tree, pull console logs, watch network calls, trace performance, and read computed styles.
Bug Slime takes 11.
Addy Osmani Browser Testing with DevTools
The hero reproduces the bug, then inspects the live page.
What really happensFor a UI bug it navigates, screenshots, checks console, DOM, computed styles, and the accessibility tree, then names the cause.
Bug Slime takes 27.
Addy Osmani Browser Testing with DevTools
The slime stays down only after a clean reload.
What really happensAfter the source fix, it reloads, compares screenshots, and checks for a clean console. DOM, logs, and responses stay untrusted data.
Bug Slime takes 23. Bug Slime falls.
Victory
The Bug Slime falls.

Learn this spell

Claude Code and Codex

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

Notes

Needs the chrome-devtools MCP server. Add it in .mcp.json or Claude Code settings as npx -y chrome-devtools-mcp@latest --isolated (temp profile, wiped on close). Without that flag, Chrome uses a dedicated profile under ~/.cache/chrome-devtools-mcp/. --autoConnect needs Chrome 144+ and can see every open window of your real profile. DOM, console, network, and script output are untrusted data. Skip for backend-only work. A per-skill install omits the repo-level references/ directory. All 25 skills: npx skills add addyosmani/agent-skills.

Proving Grounds record

Controlled quest results, separate from recorded usage. Each setup pools runs across its quests. The per-quest table below has casts, cast time, mana, incantation and runes; medians are not pooled.

Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.

Clear rate83%5 of 6 runs passed every check; Unarmed: 18 of 30 (matched quests)

Steadiness44%reliability: Wilson 95% lower bound

Buff+23 ppvs Unarmed, only matched quests (6 equipped runs; 30 control runs)

Instant casts2 of 6runs cleared on the first prompt; Unarmed: 5 of 30 (matched quests)

Attunement50%3 of 6 runs opened an equipped skill

Upkeep+6% manaextra mana per run vs Unarmed, median of 2 quests

IncantationNot measuredoutput tokens per run vs Unarmed

Runes-6%lines added per run vs Unarmed, median of 2 quests

Per-quest Proving Grounds record
QuestFixed task	Clear ratePassed runs	SteadinessReliability lower bound	BuffClear-rate points vs Unarmed	Instant castsFirst-prompt clears	CastsPrompts to clear	Cast timeAgent runtime	ManaCost at API list prices	IncantationOutput tokens	RunesLines added / removed	AttunementSkills opened	SetupApp, model, effort and sandbox
Hunter: Month-End Schedule RepairQuest v2	67%2 of 3Unarmed: 33% (5 of 15)	21%	+33 ppvs Unarmed	2 of 367%Unarmed: 5 of 15	1	44sUnarmed: 39s	1,357 Unarmed: 1,319	Not reportedUnarmed: 4.7k	+49 / -8Unarmed: +48 / -8	0%	Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot) Try this loadout `node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-browser-testing-with-devtools --quest hunter-rent-schedule --hero claude-code --weapon 'claude-sonnet-5-5' --charge medium --cast invoked --control` Recorded with quest v2 and spell commits `addy-browser-testing-with-devtools@aeac41d4d005999432bb7312f7ff06383a91d59d`. How to run it
Illusionist: booking form repairQuest v4	100%3 of 3Unarmed: 87% (13 of 15)	44%	+13 ppvs Unarmed	0 of 30%Unarmed: 0 of 15	2	53sUnarmed: 1m 6s	1,919 Unarmed: 1,761	Not reportedUnarmed: 12.2k	+99 / -56Unarmed: +114 / -61	100%	Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot) Try this loadout `node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-browser-testing-with-devtools --quest illusionist-signup-form --hero claude-code --weapon 'claude-sonnet-5-5' --charge medium --cast invoked --control` Recorded with quest v4 and spell commits `addy-browser-testing-with-devtools@aeac41d4d005999432bb7312f7ff06383a91d59d`. How to run it

Scrying (screenshots of runs)

The latest run of each setup. Local paths, names and ids are blurred; credentials are removed.

Scrying (screenshot) of a cleared run of Hunter: Month-End Schedule Repair with Addy Osmani Browser Testing with DevTools, Claude Code

Scrying (screenshot) of a cleared run of Illusionist: booking form repair with Addy Osmani Browser Testing with DevTools, Claude Code

Explore the quests, full results and trial method

This spell has no recorded sessions in the curator's logs. Tried it? Send a spell report.