Depurar Puppeteer

Desactivar el modo sin interfaz gráfica

A veces, resulta útil ver lo que muestra el navegador. En lugar de iniciar en modo sin interfaz gráfica, inicia una versión completa del navegador con headless: false:

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

Disminuye la velocidad

La opción slowMo ralentiza las operaciones de Puppeteer según la cantidad de milisegundos especificada. Es otra forma de ver qué está sucediendo.

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

Cómo capturar el resultado de la consola

Puedes escuchar el evento console. Esto también es útil para depurar código en page.evaluate():

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

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

Cómo usar el depurador en el navegador de código de la aplicación

Hay dos contextos de ejecución: node.js, que ejecuta el código de prueba, y el navegador que ejecuta el código de la aplicación, que se está probando. Esto te permite depurar código en el navegador de códigos de la aplicación; el código dentro de evaluate().

Usa {devtools: true} cuando inicies Puppeteer.

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

Cómo cambiar el tiempo de espera predeterminado de la prueba

  • jest: jest.setTimeout(100000);
  • jazmín: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha: this.timeout(100000); (no olvides cambiar la prueba para usar la función y no '=>')

Agrega una sentencia de evaluación con un depurador dentro o un depurador a una declaración de evaluación existente:

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

Luego, la prueba deja de ejecutarse en la declaración de evaluación anterior y Chromium se detiene en modo de depuración.

Usa el depurador en node.js

Esto te permite depurar el código de prueba. Por ejemplo, puedes recorrer await page.click() en la secuencia de comandos node.js y ver que el clic ocurre en el navegador de código de la aplicación.

No puedes ejecutar await page.click() en la consola de Herramientas para desarrolladores debido al error 833928 de Chromium. Así que si quieres probar algo, tienes que agregarlo a tu archivo de prueba.

  1. Agrega depurador. A tu prueba, por ejemplo: javascript debugger; await page.click('a[target=_blank]');
  2. Se estableció la ejecución sin interfaz gráfica como falsa.
  3. Ejecuta el nodo --inspect-brk, por ejemplo, node --inspect-brk node_modules/.bin/jest tests.
  4. En Chrome, abre chrome://inspect/#devices y haz clic en inspect.
  5. En el navegador de prueba que acabas de abrir, escribe F8 para reanudar la ejecución de prueba.
  6. Ahora se seleccionará tu depurador y podrás realizar la depuración en el navegador de prueba.

Habilita el registro detallado

El tráfico del protocolo interno de Herramientas para desarrolladores se registra con el módulo de depuración en el espacio de nombres de 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'

Depurar el código de Puppeteer (nodo)

Usa ndb:

  • npm install -g ndb (o usa npx).
  • Agrega un depurador al código de Puppeteer (nodo).
  • Agrega ndb (o npx ndb) antes del comando de prueba. Por ejemplo: ndb jest o ndb mocha (o npx ndb jest / npx ndb mocha).
  • ¡depura tu prueba en Chromium como un jefe!