如何在 Puppeteer 中打印页面的控制台输出，就像在浏览器中显示的那样？

Question

我一直看到这个代码错误

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

那失败了

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

产生

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

好吧，所以我想也许我可以做到这一点

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

不：这会抛出一些巨大的

JSHandle

东西。

好吧，也许吧

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

不：打印出来的

JSHandle: Hello %s JSHandle: World

我想我可以通过删除前 9 个字符来破解它。

我也尝试过

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

不：打印出来的

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

好吧，怎么样

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

不，打印出来了

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)

再来一次

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

和以前一样

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

我什至追踪了

msg.text()

，但它所做的只是返回一个预制字符串，所以现在使用它已经太晚了。

如何在 puppeteer 中获得与浏览器 console.log 相同的输出？

---

PS：如上所述，这个 hack 在 puppeteer 1.20.0 中有效

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

但这显然是一个黑客行为，我预计它会在某个时候崩溃，所以寻找正确的解决方案。

Answer 1

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

或

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

有效

Answer 2

您可以使用

msg.args()

，解决方法如下。

page.on('console', async msg => {
  const args = await msg.args()
  args.forEach(async (arg) => {
    const val = await arg.jsonValue()
    // value is serializable
    if (JSON.stringify(val) !== JSON.stringify({})) console.log(val)
    // value is unserializable (or an empty oject)
    else {
      const { type, subtype, description } = arg._remoteObject
      console.log(`type: ${type}, subtype: ${subtype}, description:\n ${description}`)
    }
  })
});

或者类似的东西，只打印

Error

page.on('console', async msg => {
  // serialize my args the way I want
  const args = await Promise.all(msg.args.map(arg => arg.executionContext().evaluate(arg => {
    // I'm in a page context now. If my arg is an error - get me its message.
    if (arg instanceof Error)
      return arg.message;
    // return arg right away. since we use `executionContext.evaluate`, it'll return JSON value of
    // the argument if possible, or `undefined` if it fails to stringify it.
    return arg;
  }, arg)));
  console.log(...args);
});