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.
- Aggiungi il debugger al tuo test, ad esempio:
javascript debugger; await page.click('a[target=_blank]');
- Imposta headless su false.
- Esegui il nodo
--inspect-brk
, ad esempionode --inspect-brk node_modules/.bin/jest tests
. - Apri
chrome://inspect/#devices
in Chrome e fai clic suinspect
. - Nel browser di test appena aperto, digita
F8
per riprendere l'esecuzione del test. - 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
(onpx ndb
) prima del comando di test. Ad esempio:ndb jest
ondb mocha
(onpx ndb jest
/npx ndb mocha
). - esegui il debug del tuo test in Chromium come un capo.