Browser Testing with DevTools

Steruje testami w prawdziwej przeglądarce przez Chrome DevTools MCP, żeby łapać problemy w DOM i konsoli.

Autor: addyosmani · addyosmani/agent-skills

Działa po konfiguracji ★ 8.0/10

Browser Testing with DevTools — Steruje testami w prawdziwej przeglądarce przez Chrome DevTools MCP, żeby łapać problemy w DOM i konsoli.

Co robi ten skill

Testuje w prawdziwych przeglądarkach przez Chrome DevTools MCP. Użyj, gdy budujesz albo debugujesz cokolwiek, co działa w przeglądarce. Użyj, gdy chcesz zajrzeć do DOM, przechwycić błędy z konsoli, przeanalizować requesty sieciowe, zrobić profiling wydajności albo zweryfikować wygląd na prawdziwych danych runtime'owych. Wymaga skonfigurowanego serwera MCP chrome-devtools.

Raport z testu

Czysta instalacja jednego pliku — git clone + cp słowo w słowo zadziałało bez poprawek, a frontmatter parsuje się pod strict YAML — ale skill jest bezużyteczny bez osobno skonfigurowanego serwera MCP chrome-devtools i uruchomionego Chrome'a, czyli twardej zewnętrznej zależności, którą dokumentacja uczciwie ujawnia od razu. W zadaniu A/B live debugowania w przeglądarce (odtworzenie ReferenceError, fix, ponowna weryfikacja) zarówno ręka ze skillem, jak i baseline bez skilla znalazły i naprawiły buga z weryfikacją na żywo; przewagą skilla była dyscyplina procesu — jego workflow REPRODUCE→INSPECT→DIAGNOSE→FIX→VERIFY plus zrzuty ekranu przed/po — a nie lepsza diagnoza. Dobrze napisana, uczciwa dokumentacja z niezwykle mocnymi wskazówkami bezpieczeństwa (izolacja profilu, niezaufana treść w przeglądarce).

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

Instalacja

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

Komendy i przykładowe prompty

  • /browser-testing-with-devtoolsSteruje testami w prawdziwej przeglądarce przez Chrome DevTools MCP, żeby łapać problemy w DOM i konsoli.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • 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