text: Debugging Puppeteer
  Published on • Updated on
  Turn off headless modeTurn 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 });
  Slow it downSlow 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
  });
  Capture console outputCapture 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}`));
  Use debugger in application code browserUse debugger in application code browser
  There are two execution context: node.js that is running test code, and the browser running application code being tested. This lets you debug code in the application code browser; the code inside
  evaluate(). inside or 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.
  Use debugger in node.jsUse debugger in node.js
  This will let you debug test code. For example, you can step over
  await page.click() in the node.js script and see the click happen in the application code browser.
  Note that you won't be able to run
  await page.click() in DevTools console due to this Chromium bug. So if you want to try something out, you have to add it to your test file.
  - Add debugger; to your test, for example:
  debugger;
  await page.click('a[target=_blank]');
  Set headless to false.
  Run node
  --inspect-brk, for example,
  node --inspect-brk node_modules/.bin/jest tests.
  In Chrome open
  chrome://inspect/#devicesand click
  inspect.
  In the newly opened test browser, type
  F8to resume test execution.
  Now your debugger will be hit and you can debug in the test browser
  Enable verbose loggingEnable 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
  # 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'
  Debug your Puppeteer (node) codeDebug your Puppeteer (node) code
  Last updated: Improve article