Puppeteer Debug

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.

  1. Menambahkan debugger ke pengujian, misalnya: javascript debugger; await page.click('a[target=_blank]');
  2. Setel headless ke salah.
  3. Jalankan node --inspect-brk, misalnya, node --inspect-brk node_modules/.bin/jest tests.
  4. Di Chrome, buka chrome://inspect/#devices, lalu klik inspect.
  5. Di browser pengujian yang baru dibuka, ketik F8 untuk melanjutkan eksekusi uji.
  6. 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 (atau npx ndb) sebelum perintah pengujian Anda. Misalnya: ndb jest atau ndb mocha (atau npx ndb jest / npx ndb mocha).
  • men-debug pengujian Anda di dalam Chromium seperti bos.