chrome-devtools

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

1. Zainstaluj zależności systemowe. Na Linux/WSL przejdź do folderu .claude/skills/chrome-devtools/scripts i uruchom ./install-deps.sh, który automatycznie wykryje system i zainstaluje wymagane biblioteki. Na macOS i Windows ten krok pomiń — zależności są już wbudowane w Chrome.

2. Zainstaluj zależności Node.js. W tym samym folderze uruchom npm install, aby pobrać Puppeteera, debug i yargs.

3. Opcjonalnie zainstaluj ImageMagick do automatycznej kompresji screenshotów. Na macOS użyj brew install imagemagick, na Ubuntu/Debian/WSL użyj sudo apt-get install imagemagick. Bez niego screenshoty większe niż 5MB mogą się nie załadować w Claude.

4. Przetestuj instalację. Uruchom node navigate.js --url https://example.com — powinieneś otrzymać JSON z potwierdzeniem, URL-em i tytułem strony.

5. Używaj dostępnych skryptów do automatyzacji. navigate.js otwiera strony, screenshot.js robi zrzuty ekranu, click.js klika elementy, fill.js wypełnia pola formularza. Wszystkie skrypty znajdują się w folderze scripts i zwracają wyniki w JSON.

6. Zawsze sprawdź bieżący katalog (pwd) przed uruchomieniem skryptów, aby upewnić się, że pracujesz w odpowiednim folderze.