Displaying console output from Puppeteer's page.evaluate in Node.js

Other Questions Puppeteer
1

I’m working on a Puppeteer project and I’m stuck. Does anyone know how to show console logs from inside the page.evaluate function? I want to see these logs in my Node.js environment while the page is being evaluated.

My main goal is to keep track of what’s happening during the page evaluation and display some info to the user. It would be great if I could update the console in real-time with the progress.

Here’s a simple example of what I’m trying to do:

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.evaluate(() => {
  // How can I make this log appear in Node.js?
  console.log('Page evaluation started');
  // Some operations here
  console.log('Page evaluation finished');
});

await browser.close();

Any ideas on how to achieve this? Thanks in advance!

2

I’ve encountered this issue before and found a neat workaround. Instead of relying on console.log, you can use page.evaluate to return values directly to your Node.js environment. Here’s how:

const result = await page.evaluate(() => {
  const logs = [];
  logs.push('Page evaluation started');
  // Your operations here
  logs.push('Page evaluation finished');
  return logs;
});

console.log(result);

This approach gives you full control over what you want to log and when. You can even include more complex data structures if needed. It’s particularly useful when you need to capture specific information during the evaluation process.

Remember, this method is synchronous, so it waits for the entire evaluation to complete before logging. If you need real-time updates, you might want to combine this with the page.on(‘console’) method mentioned earlier.

3

I’ve actually tackled this issue before in one of my projects. While Bob_Clever’s suggestion works, I found a more robust solution that gives you more control over the logging process.

Try using page.exposeFunction() to create a custom logging function. Here’s how I did it:

await page.exposeFunction('customLog', (message) => {
  console.log(`Browser log: ${message}`);
});

await page.evaluate(() => {
  customLog('Page evaluation started');
  // Your operations here
  customLog('Page evaluation finished');
});

This approach allows you to format your logs however you want and even add timestamps or other metadata. It’s especially useful if you need to differentiate between different types of logs or want to handle them differently based on their content.

Just remember to define the customLog function before your page.evaluate call. This method has worked wonders for me in keeping track of complex scraping operations.

4

hey there! you can use page.on(‘console’) to catch those logs. just add this before your evaluate:

page.on(‘console’, msg => console.log(‘browser log:’, msg.text()));

then your node console will show everything logged in the browser. hope this helps!