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.
- Dodaj do testu debuger, na przykład:
javascript debugger; await page.click('a[target=_blank]');
- Ustaw wartość bez interfejsu graficznego na false (fałsz).
- Uruchom węzeł
--inspect-brk
, na przykładnode --inspect-brk node_modules/.bin/jest tests
. - W Chrome otwórz
chrome://inspect/#devices
i kliknijinspect
. - W nowo otwartej przeglądarce testowej wpisz
F8
, aby wznowić wykonanie testu. - 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
(lubnpx ndb
) przed poleceniem testowym. Na przykład:ndb jest
lubndb mocha
(lubnpx ndb jest
/npx ndb mocha
). - debuguj test w Chromium jak mistrz!