Browser Testing with DevTools

Steuert echte Browser-Tests über Chrome DevTools MCP, um DOM- und Konsolenfehler zu finden.

von addyosmani · addyosmani/agent-skills

Funktioniert mit Setup ★ 8.0/10

Browser Testing with DevTools — Steuert echte Browser-Tests über Chrome DevTools MCP, um DOM- und Konsolenfehler zu finden.

Was es kann

Testet in echten Browsern über Chrome DevTools MCP. Einsetzen beim Bauen oder Debuggen von allem, was im Browser läuft. Einsetzen, um das DOM zu inspizieren, Konsolenfehler zu erfassen, Netzwerk-Requests zu analysieren, Performance zu profilen oder visuellen Output mit echten Laufzeitdaten zu verifizieren. Erfordert einen konfigurierten chrome-devtools-MCP-Server.

Testbericht

Saubere Einzeldatei-Installation — die wortgetreue Installation per git clone + cp lief ohne Korrekturen, und das Frontmatter parst strikt — aber der Skill ist ohne separat konfigurierten chrome-devtools-MCP-Server und laufendes Chrome untätig, eine harte externe Abhängigkeit, die die Doku von Anfang an ehrlich benennt. In einer A/B-Live-Browser-Debugging-Aufgabe (einen ReferenceError reproduzieren, fixen, erneut verifizieren) fanden und fixten sowohl der Skill-Arm als auch eine No-Skill-Baseline den Bug mit Live-Verifikation; der Vorteil des Skills lag in der Prozessdisziplin — seinem REPRODUCE→INSPECT→DIAGNOSE→FIX→VERIFY-Workflow plus Vorher/Nachher-Screenshot-Belegen — nicht in einer besseren Diagnose. Gut geschriebene, ehrliche Doku mit ungewöhnlich starker Sicherheitsanleitung (Profil-Isolation, nicht vertrauenswürdiger Browser-Content).

Getestet am: 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

Befehle & Beispiel-Prompts

  • /browser-testing-with-devtoolsSteuert echte Browser-Tests über Chrome DevTools MCP, um DOM- und Konsolenfehler zu finden.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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