javascript - How do print the console output of the page in puppeter as it would appear in the browser?

Question

I keep seeing this WRONG CODE

page.on('console', msg => console.log(msg.text()));

That FAILS

console.log('Hello %s', 'World');

produces

Hello World     // browser
Hello %s World  // puppeteer

Ok, So I thought maybe I could do this

page.on('console', msg => console.log(...msg.args()));

NOPE: That dumps out some giant JSHandle thing.

Ok, So maybe

page.on('console', msg => console.log(...msg.args().map(a => a.toString());

NOPE: That prints

JSHandle: Hello %s JSHandle: World

I suppose I can hack it by removing the first 9 characters.

I also tried

page.on('console', msg => console.log(...msg.args().map(a => a.jsonValue())));

NOPE: That prints

Promise { <pending> } Promise { <pending> }

Okay how about

page.on('console', async(msg) => {
  const args = Promise.all(msg.args().map(a => a.jsonValue()));
  console.log(...args);
});

Nope, That prints

UnhandledPromiseRejectionWarning: TypeError: Found non-callable @@iterator
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 95)

Another go

page.on('console', async(msg) => {
  const args = Promise.all(msg.args().map(async(a) => {
    return await a.jsonValue();
  }));
  console.log(...args);
});

same as before

UnhandledPromiseRejectionWarning: TypeError: Found non-callable @@iterator
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a 

I even traced through msg.text() but all it does is return a premade string so it's too late to use that.

How do I get the same output as the browser's console.log in puppeteer?

---

PS: as mentioned above, this hack works in puppeteer 1.20.0

  page.on('console', (msg) => {
    console.log(...msg.args().map(v => v.toString().substr(9)));
  });

but it's clearly a hack and I expect it will break at some point so looking for the correct solution.

Answer 1

  page.on('console', async e => {
    const args = await Promise.all(e.args().map(a => a.jsonValue()));
    console.log(...args);
  });

or

  page.on('console', async e => {
    const args = await Promise.all(e.args().map(a => a.jsonValue()));
    console[e.type() === 'warning' ? 'warn' : e.type()](...args);
  });

works