Puppeteer di debug

Disattiva la modalità headless

A volte è utile vedere cosa viene visualizzato nel browser. Anziché avviare in modalità headless, avvia una versione completa del browser utilizzando headless: false:

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

Rallenta

L'opzione slowMo rallenta le operazioni Puppeteer del numero di millisecondi specificato. È un altro modo per aiutarti a capire cosa sta succedendo.

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

Acquisisci output della console

Puoi rimanere in ascolto dell'evento console. È utile anche per il debug del codice in page.evaluate():

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

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

Utilizzare il debugger nel browser del codice dell'applicazione

Il contesto di esecuzione è due: node.js che esegue il codice di test e il browser che esegue il codice dell'applicazione testato. In questo modo puoi eseguire il debug del codice nel browser del codice dell'applicazione (il codice all'interno di evaluate()).

Usa {devtools: true} quando avvii Puppeteer

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

Modifica timeout di test predefinito

  • jest: jest.setTimeout(100000);
  • gelsomino: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha: this.timeout(100000); (non dimenticare di cambiare test per utilizzare function e non '=>')

Aggiungi un'istruzione di valutazione con il debugger all'interno o aggiungi il debugger a un'istruzione di valutazione esistente:

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

Il test viene quindi interrotto nell'istruzione di valutazione sopra riportata e Chromium si arresta in modalità di debug.

Utilizzare il debugger in node.js

In questo modo puoi eseguire il debug del codice di test. Ad esempio, puoi eseguire un passaggio oltre await page.click() nello script node.js e vedere che il clic avviene nel browser del codice dell'applicazione.

Non puoi eseguire await page.click() nella console DevTools a causa del bug di Chromium 833928. Pertanto, se vuoi provare qualcosa, devi aggiungerlo al file di test.

  1. Aggiungi il debugger al tuo test, ad esempio: javascript debugger; await page.click('a[target=_blank]');
  2. Imposta headless su false.
  3. Esegui il nodo --inspect-brk, ad esempio node --inspect-brk node_modules/.bin/jest tests.
  4. Apri chrome://inspect/#devices in Chrome e fai clic su inspect.
  5. Nel browser di test appena aperto, digita F8 per riprendere l'esecuzione del test.
  6. A questo punto, il debugger è stato selezionato ed è possibile eseguire il debug nel browser di test.

Attiva logging dettagliato

Il traffico del protocollo DevTools interno viene registrato con il modulo di debug nello spazio dei nomi Pupeteer.

# 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'

Esegui il debug del codice Puppeteer (nodo)

Utilizza ndb:

  • npm install -g ndb (o utilizza npx).
  • Aggiungi un debugger al codice Puppeteer (nodo).
  • Aggiungi ndb (o npx ndb) prima del comando di test. Ad esempio: ndb jest o ndb mocha (o npx ndb jest / npx ndb mocha).
  • esegui il debug del tuo test in Chromium come un capo.