Puppeteer debuggen

Monitorlosen Modus deaktivieren

Manchmal ist es hilfreich, zu sehen, was im Browser angezeigt wird. Anstatt im monitorlosen Modus zu starten, können Sie mit headless: false eine Vollversion des Browsers starten:

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

Verlangsamen

Die Option slowMo verlangsamt Puppeteer-Vorgänge um die angegebene Anzahl von Millisekunden. Dies ist eine weitere Möglichkeit, um den Überblick zu behalten.

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

Konsolenausgabe erfassen

Sie können auf das Ereignis console warten. Dies ist auch beim Beheben von Codefehlern in page.evaluate() hilfreich:

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

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

Debugger im Anwendungscodebrowser verwenden

Es gibt zwei Ausführungskontexte: node.js, der Testcode ausführt, und den Browser, der den zu testenden Anwendungscode ausführt. Auf diese Weise können Sie Code im Anwendungscode-Browser debuggen, d. h. im Code in evaluate().

Beim Starten von Puppeteer {devtools: true} verwenden

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

Standardzeitlimit für Tests ändern

  • jest::jest.setTimeout(100000);
  • Jasmine:jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha:this.timeout(100000); (vergessen Sie nicht, „test“ in function und nicht „=>“ zu ändern)

Fügen Sie eine Auswertungsanweisung mit einem Debugger hinzu oder fügen Sie einer vorhandenen Auswertungsanweisung einen Debugger hinzu:

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

Der Test wird dann in der obigen Auswertungsanweisung beendet und Chromium wird im Fehlerbehebungsmodus beendet.

Debugger in node.js verwenden

So können Sie Fehler im Testcode beheben. Sie können beispielsweise im Node.js-Skript einen Schritt über await page.click() ausführen und sehen, wie der Klick im Anwendungscodebrowser erfolgt.

Sie können await page.click() aufgrund des Chromium-Fehlers 833928 nicht in der Entwicklertools-Konsole ausführen. Wenn Sie also etwas ausprobieren möchten, müssen Sie es Ihrer Testdatei hinzufügen.

  1. Fügen Sie dem Test einen Debugger hinzu. Beispiel: javascript debugger; await page.click('a[target=_blank]');
  2. Legen Sie „headless“ auf „false“ fest.
  3. Führen Sie den Knoten --inspect-brk aus, z. B. node --inspect-brk node_modules/.bin/jest tests.
  4. Öffnen Sie in Chrome chrome://inspect/#devices und klicken Sie auf inspect.
  5. Geben Sie im neu geöffneten Testbrowser F8 ein, um die Testausführung fortzusetzen.
  6. Jetzt wird der Debugger aufgerufen und Sie können im Testbrowser Fehler beheben

Ausführliches Logging aktivieren

Der interne DevTools-Protokoll-Traffic wird mit dem Debug-Modul unter dem Puppeteer-Namespace protokolliert.

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

Fehler im Puppeteer-Code (Knoten) beheben

Verwenden Sie ndb:

  • npm install -g ndb (oder npx verwenden).
  • Fügen Sie Ihrem Puppeteer-Code (Knoten) einen Debugger hinzu.
  • Fügen Sie ndb (oder npx ndb) vor dem Testbefehl ein. Beispiel: ndb jest oder ndb mocha (oder npx ndb jest / npx ndb mocha).
  • Debuggen Sie Ihren Test in Chromium wie ein Profi!