Nonaktifkan mode headless
Terkadang ada baiknya untuk melihat apa yang ditampilkan oleh browser. Sebagai ganti
meluncurkan dalam mode headless, luncurkan versi lengkap browser menggunakan
headless: false
:
const browser = await puppeteer.launch({ headless: false });
Perlambat
Opsi slowMo
memperlambat operasi Puppeteer berdasarkan jumlah milidetik yang ditentukan. Ini adalah cara lain untuk membantu
melihat apa yang sedang terjadi.
const browser = await puppeteer.launch({
headless: false,
slowMo: 250, // slow down by 250ms
});
Merekam output konsol
Anda dapat memproses peristiwa console
. Hal ini juga berguna saat men-debug kode
di page.evaluate()
:
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
await page.evaluate(() => console.log(`url is ${location.href}`));
Menggunakan debugger di browser kode aplikasi
Ada dua konteks eksekusi: node.js yang menjalankan kode pengujian, dan browser yang menjalankan kode aplikasi yang sedang diuji. Hal ini memungkinkan Anda men-debug kode dalam
browser kode aplikasi; kode dalam evaluate()
.
Gunakan {devtools: true}
saat meluncurkan Puppeteer
const browser = await puppeteer.launch({ devtools: true });
Mengubah waktu tunggu pengujian default
- jest:
jest.setTimeout(100000);
- melati:
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
- mocha:
this.timeout(100000);
(jangan lupa mengubah pengujian agar menggunakan fungsi dan bukan '=>')
Tambahkan pernyataan evaluasi dengan debugger di dalamnya atau tambahkan debugger ke pernyataan evaluasi yang sudah ada:
await page.evaluate(() => {
debugger;
});
Pengujian kemudian berhenti mengeksekusi dalam pernyataan evaluasi di atas, dan Chromium berhenti dalam mode debug.
Menggunakan debugger di node.js
Tindakan ini memungkinkan Anda men-debug kode pengujian. Misalnya, Anda dapat melangkah ke
await page.click()
dalam skrip node.js dan melihat klik terjadi di
browser kode aplikasi.
Anda tidak dapat menjalankan await page.click()
di konsol DevTools karena
bug Chromium 833928.
Jadi, jika ingin mencoba sesuatu, Anda harus menambahkannya ke file pengujian.
- Menambahkan debugger ke pengujian, misalnya:
javascript debugger; await page.click('a[target=_blank]');
- Setel headless ke salah.
- Jalankan node
--inspect-brk
, misalnya,node --inspect-brk node_modules/.bin/jest tests
. - Di Chrome, buka
chrome://inspect/#devices
, lalu klikinspect
. - Di browser pengujian yang baru dibuka, ketik
F8
untuk melanjutkan eksekusi uji. - Debugger Anda telah dijalankan dan Anda dapat melakukan debug di browser pengujian
Aktifkan logging panjang
Traffic protokol DevTools internal dicatat ke dalam log dengan modul debug di bawah namespace 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'
Men-debug kode Puppeteer (node) Anda
Gunakan ndb:
npm install -g ndb
(atau gunakan npx).- Tambahkan debugger ke kode Puppeteer (node) Anda.
- Tambahkan
ndb
(ataunpx ndb
) sebelum perintah pengujian Anda. Misalnya:ndb jest
ataundb mocha
(ataunpx ndb jest
/npx ndb mocha
). - men-debug pengujian Anda di dalam Chromium seperti bos.