Browser Testing with DevTools

Draait echte browsertests via Chrome DevTools MCP om DOM- en console-problemen op te sporen.

Door addyosmani · addyosmani/agent-skills

Werkt met setup ★ 8.0/10

Browser Testing with DevTools — Draait echte browsertests via Chrome DevTools MCP om DOM- en console-problemen op te sporen.

Wat het doet

Test in echte browsers via Chrome DevTools MCP. Gebruik dit bij het bouwen of debuggen van alles dat in een browser draait. Gebruik dit als je de DOM moet inspecteren, console-fouten moet vastleggen, netwerkverzoeken moet analyseren, performance moet profileren, of visuele output met echte runtime-data moet verifiëren. Vereist dat de chrome-devtools MCP-server is geconfigureerd.

Testrapport

Schone installatie van één bestand — letterlijke git clone + cp werkte zonder fixes en de frontmatter parset strict — maar de skill is inert zonder een apart geconfigureerde chrome-devtools MCP-server en een draaiende Chrome, een harde externe dependency die de docs vooraf eerlijk vermelden. In een A/B live-browserdebugtaak (reproduceer een ReferenceError, fix hem, verifieer opnieuw) vonden en fixten zowel de skill-variant als een baseline zonder skill de bug met live verificatie; de meerwaarde van de skill zat in procesdiscipline — de REPRODUCE→INSPECT→DIAGNOSE→FIX→VERIFY-workflow plus voor/na-screenshotbewijs — eerder dan een betere diagnose. Goed geschreven, eerlijke docs met ongewoon sterke security-richtlijnen (profielisolatie, niet-vertrouwde browserinhoud).

Getest op: 2026-07-11 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/addyosmani/agent-skills
cd agent-skills
mkdir -p ~/.claude/skills
cp -r skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtools

Commando's en voorbeeldprompts

  • /browser-testing-with-devtoolsDraait echte browsertests via Chrome DevTools MCP om DOM- en console-problemen op te sporen.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • Test this page in a real browser and check the console
  • Inspect network requests while debugging the login flow
  • Profile page performance and report console errors