Debuger marionetek

Wyłącz tryb bez interfejsu graficznego

Czasem warto zobaczyć, co wyświetla się w przeglądarce. Zamiast uruchamiać przeglądarkę w trybie bez interfejsu graficznego, uruchom pełną wersję przeglądarki za pomocą polecenia headless: false:

const browser = await puppeteer.launch({ headless: false });

Zwolnij

Opcja slowMo spowalnia operacje Puppeteer o określoną liczbę milisekund. To inny sposób, by pomóc mu sprawdzać, co się dzieje.

const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, // slow down by 250ms
});

Przechwytywanie danych wyjściowych konsoli

Możesz nasłuchiwać zdarzenia console. Jest to też przydatne podczas debugowania kodu w page.evaluate():

page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

Korzystanie z debugera w przeglądarce kodu aplikacji

Występują 2 konteksty wykonywania: węzeł.js, na którym uruchamiany jest kod testowy, oraz przeglądarka, w której uruchomiono kod aplikacji, który jest testowany. Dzięki temu możesz debugować kod w przeglądarce kodu aplikacji; kod w elemencie evaluate().

Użyj {devtools: true} podczas uruchamiania Puppeteer

const browser = await puppeteer.launch({ devtools: true });

Zmiana domyślnego czasu oczekiwania na test

  • jest: jest.setTimeout(100000);
  • jaśmin: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mokka: this.timeout(100000); (nie zapomnij zmienić testu, aby użyć funkcji, a nie „=>”)

Dodaj instrukcję oceniania z debugerem lub dodaj debuger do istniejącej instrukcji oceniania:

await page.evaluate(() => {
  debugger;
});

Następnie test zostaje zatrzymany w powyższej instrukcji oceny, a Chromium zatrzymuje się w trybie debugowania.

Używanie debugera w Node.js

Umożliwia to debugowanie kodu testowego. Możesz na przykład przeskoczyć parametr await page.click() w skrypcie Node.js i sprawdzić, czy kliknięcie następuje w przeglądarce kodu aplikacji.

Nie możesz uruchomić narzędzia await page.click() w konsoli Narzędzi deweloperskich z powodu błędu 833928 w Chromium. Jeśli chcesz coś sprawdzić, musisz dodać to do pliku testowego.

  1. Dodaj do testu debuger, na przykład: javascript debugger; await page.click('a[target=_blank]');
  2. Ustaw wartość bez interfejsu graficznego na false (fałsz).
  3. Uruchom węzeł --inspect-brk, na przykład node --inspect-brk node_modules/.bin/jest tests.
  4. W Chrome otwórz chrome://inspect/#devices i kliknij inspect.
  5. W nowo otwartej przeglądarce testowej wpisz F8, aby wznowić wykonanie testu.
  6. Teraz debuger zostaje uruchomiony i można go debugować w przeglądarce testowej.

Włącz szczegółowe zapisywanie w dzienniku

Ruch generowany przez wewnętrzny protokół DevTools jest rejestrowany w module debugowania w przestrzeni nazw Puppeteer.

# Basic verbose logging
env DEBUG="puppeteer:*" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network
# domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

Debugowanie kodu Puppeteer (węzła)

Użyj ndb:

  • npm install -g ndb (lub użyj npx).
  • Dodaj debuger do kodu (węzła) Puppeteer.
  • Dodaj ndb (lub npx ndb) przed poleceniem testowym. Na przykład: ndb jest lub ndb mocha (lub npx ndb jest / npx ndb mocha).
  • debuguj test w Chromium jak mistrz!