How to get all console messages with puppeteer? including errors, CSP violations, failed resources, etc

Solution 1:

The GitHub issue about capturing console erorrs includes a great comment about listening to console and network events. For example, you can register for console output and network responses and failures like this:

  page
    .on('console', message =>
      console.log(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`))
    .on('pageerror', ({ message }) => console.log(message))
    .on('response', response =>
      console.log(`${response.status()} ${response.url()}`))
    .on('requestfailed', request =>
      console.log(`${request.failure().errorText} ${request.url()}`))

And get the following output, for example:

200 'http://do.carlosesilva.com/puppeteer/'
LOG This is a standard console.log message
Error: This is an error we are forcibly throwing
    at http://do.carlosesilva.com/puppeteer/:22:11
net::ERR_CONNECTION_REFUSED https://do.carlosesilva.com/http-only/sample.png
404 'http://do.carlosesilva.com/puppeteer/this-image-does-not-exist.png'
ERR Failed to load resource: the server responded with a status of 404 (Not Found)

See also types of console messages received with the console event and response, request and failure objects received with other events.

If you want to pimp your output with some colours, you can add Chalk:

  const chalk = require('chalk')
  page
    .on('console', message => {
      const type = message.type().substr(0, 3).toUpperCase()
      const colors = {
        LOG: text => text,
        ERR: chalk.red,
        WAR: chalk.yellow,
        INF: chalk.cyan
      }
      const color = colors[type] || chalk.blue
      console.log(color(`${type} ${message.text()}`))
    })
    .on('pageerror', ({ message }) => console.log(chalk.red(message)))
    .on('response', response =>
      console.log(chalk.green(`${response.status()} ${response.url()}`)))
    .on('requestfailed', request =>
      console.log(chalk.magenta(`${request.failure().errorText} ${request.url()}`)))

The examples above use Puppeteer API v2.0.0.

Solution 2:

Easiest way to capture all console messages is passing the dumpio argument to puppeteer.launch().

From Puppeteer API docs:

dumpio: <boolean> Whether to pipe the browser process stdout and stderr into process.stdout and process.stderr. Defaults to false.

Example code:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
         dumpio: true
    });

    ...

})();

Solution 3:

You need to set multiple listeners if you want to catch everything. The console event is emitted when javascript within the page calls a console API message (like console.log).

For a full list of the console API take a look at the docs for console on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Console

The reason you need multiple listeners is because some of what is being logged in the image you posted is not happening within the page.

So for example, to catch the first error in the image, net:: ERR_CONNECTION_REFUSED you would set the listener like so: page.on('requestfailed', err => console.log(err));

Puppeteer's documentation contains a full list of events. You should take a look at the documentation for the version you are using and look at the different events the Page class will emit as well as what those events will return. The example I've written above will return an instance of Puppeteer's request class.

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page