console.log does not work inside pupeteer evaluate function

Question

Considering the following code:

const puppeteer = require('puppeteer');

const run = async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.facebook.com/pg/fotosdacurva/photos/?tab=albums', { waitUntil: 'networkidle' });

    const data = await page.evaluate(() => {
        console.log("ola");

        const tds = Array.from(document.querySelectorAll('#content_container a'))
        return tds.map(td => td.textContent)
    });

    //console.log(data);
    await page.screenshot({ path: 'example.png' });

    await browser.close();
};

run();

console.log inside page.evaluate() function is not working and I cant figure out why? I think it might be related to async behavior. The function is being executed as the "data" variable is being set.

Thank you.

My guess is that it runs `console.log` on *the actual page you open* so you don't see it. It's being run, just on the page you opened — Andrew Li, Oct 29 '17 at 15:49

Md. Abu Taher · Answer 1 · 2019-11-12T22:21:31.947

If you want to listen to console of the browser, you can simply use the console event of puppeteer. For example, check this example from their docs,

page.on('console', msg => {
  for (let i = 0; i < msg.args().length; ++i)
    console.log(`${i}: ${msg.args()[i]}`);
});

What it will do is, everytime there is a console message, a event will be triggered and it'll catch that event, and print the messages for you on your nodeJS console.

Just remember that if you print a dom element or array, the original browser console will print it properly however in nodeJS, you will probably see [object Object] or similar texts instead.

`msg.args()` is a function: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-consolemessage — davesnx, Nov 12 '19 at 22:12

score 2 · Answer 2 · answered Oct 29 '17 at 16:32

You can listen for console events on the page and then write to your own console:

const page = await browser.newPage();
page.on('console', console.log);

It's not exactly the same as console.log() but it is helpful. It will give you output that looks like this:

ConsoleMessage {
  type: 'log',
  text: 'ola',
  args:
   [ JSHandle {
       _context: [Object],
       _client: [Object],
       _remoteObject: [Object],
       _disposed: false } ] }

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#event-console

score 0 · Answer 3 · answered Mar 25 '21 at 14:30

In 2021 you need to use async await to get args from JSHandle object. If you make Promise.all(args) and next time tries to evaluate on executionContext of JSHandle it will show the object of consoleMessage.

In this case, check my full answer there https://stackoverflow.com/a/66801550/9026103

console.log does not work inside pupeteer evaluate function

3 Answers3