Browser Testing with DevTools

Driver riktiga webbläsartester via Chrome DevTools MCP för att fånga DOM- och konsolproblem.

av addyosmani · addyosmani/agent-skills

Fungerar med konfiguration ★ 8.0/10

Browser Testing with DevTools — Driver riktiga webbläsartester via Chrome DevTools MCP för att fånga DOM- och konsolproblem.

Vad den gör

Testar i riktiga webbläsare via Chrome DevTools MCP. Använd när du bygger eller felsöker något som körs i en webbläsare. Använd när du behöver inspektera DOM:en, fånga konsolfel, analysera nätverksanrop, profilera prestanda eller verifiera visuell utdata med riktig körtidsdata. Kräver att chrome-devtools MCP-servern är konfigurerad.

Testrapport

Ren installation av en enda fil — git clone + cp ord för ord fungerade utan fixar och frontmatter parsas strikt — men skillen är verkningslös utan en separat konfigurerad chrome-devtools MCP-server och en körande Chrome, ett hårt externt beroende som dokumentationen redovisar ärligt från början. I en A/B-uppgift för live-webbläsarfelsökning (reproducera ett ReferenceError, fixa, verifiera igen) hittade och fixade både skillarmen och baslinjen utan skill buggen med live-verifiering; skillens fördel var processstringens — dess REPRODUCE→INSPECT→DIAGNOSE→FIX→VERIFY-arbetsflöde plus före/efter-skärmdumpsbevis — snarare än en bättre diagnos. Välskriven, ärlig dokumentation med ovanligt stark säkerhetsvägledning (profilisolering, opålitligt webbläsarinnehåll).

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

Installation

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

Kommandon och exempelprompter

  • /browser-testing-with-devtoolsDriver riktiga webbläsartester via Chrome DevTools MCP för att fånga DOM- och konsolproblem.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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