Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Debugging

Debugging tips

  1. Turn off headless mode - sometimes it's useful to see what the browser is displaying. Instead of launching in headless mode, launch a full version of the browser using headless: false:

    const browser = await puppeteer.launch({headless: false});
    
  2. Slow it down - the slowMo option slows down Puppeteer operations by the specified amount of milliseconds. It's another way to help see what's going on.

    const browser = await puppeteer.launch({
      headless: false,
      slowMo: 250 // slow down by 250ms
    });
    
  3. Capture console output - You can listen for the console event. This is also handy when debugging code in page.evaluate():

    page.on('console', msg => console.log('PAGE LOG:', msg.text()));
    
    await page.evaluate(() => console.log(`url is ${location.href}`));
    
  4. Stop test execution and use a debugger in browser

  5. Use {devtools: true} when launching Puppeteer:

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

  6. Change default test timeout:

    jest: jest.setTimeout(100000);

    jasmine: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;

    mocha: this.timeout(100000); (don't forget to change test to use function and not '=>')

  7. Add an evaluate statement with debugger inside / add debugger to an existing evaluate statement:

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

    The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode.

  8. Enable verbose logging - internal DevTools protocol traffic will be logged via the debug module under the puppeteer namespace.

    # Basic verbose logging
    env DEBUG="puppeteer:*" node script.js
    
    # Debug output can be enabled/disabled by namespace
    env DEBUG="puppeteer:protocol" node script.js # protocol connection messages
    env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
    
    # Protocol traffic can be rather noisy. This example filters out all Network domain messages
    env DEBUG="puppeteer:session" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'
    
  9. Debug your Puppeteer (node) code easily, using ndb

  10. npm install -g ndb (or even better, use npx!)

  11. add a debugger to your Puppeteer (node) code

  12. add ndb (or npx ndb) before your test command. For example:

    ndb jest or ndb mocha (or npx ndb jest / npx ndb mocha)

  13. debug your test inside chromium like a boss!