如何使用puppeteer获取所有控制台消息？包括错误,CSP违规,资源失败等

Question

我正在使用puppeteer获取一个页面,该页面在浏览器控制台中有一些错误,但是所有控制台消息都没有触发puppeteer的控制台事件.

puppeteer chromium浏览器显示多个控制台消息

但是,puppeteer只有控制台在节点中记录一件事

这是我目前使用的脚本:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on('console', msg => console.log('PAGE LOG:', msg.text));
  await page.goto('https://pagewithsomeconsoleerrors.com');
  await browser.close();
})();

编辑:正如我在下面的评论中所述,我确实尝试了Everettss推荐但不起作用的page.waitFor(5000)命令.

Edit2:msg.text意外删除了传播操作员.

Edit3:我在github上用类似但不同的示例屏幕截图打开了一个问题:https://github.com/GoogleChrome/puppeteer/issues/1512

Answer 1

关于捕获控制台错误的GitHub 问题包括关于监听控制台和网络事件的精彩评论。例如，您可以注册控制台输出和网络响应和失败，如下所示：

  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()}`))

并获得以下输出，例如：

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)

另请参阅随事件和接收的控制台消息类型，以及随其他事件接收的对象。consoleresponserequestfailure

如果你想用一些颜色拉皮条你的输出，你可以添加Chalk：

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)

上面的示例使用Puppeteer API v2.0.0。

Answer 2

捕获所有控制台消息的最简单方法是将dumpio参数传递给puppeteer.launch().

来自Puppeteer API 文档：

dumpio: <boolean> 是否将浏览器进程 stdout 和 stderr 传入process.stdoutand process.stderr。默认为false.

示例代码：

const puppeteer = require('puppeteer');

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

    ...

})();

Answer 3

如果要捕获所有内容,则需要设置多个侦听器.console当页面中的javascript调用控制台API消息(如console.log)时,将发出该事件.

有关控制台API的完整列表,请查看MDN上控制台的文档:https: //developer.mozilla.org/en-US/docs/Web/API/Console

您需要多个侦听器的原因是因为您发布的图像中记录的某些内容未在页面中发生.

因此,例如,要捕获图像中的第一个错误,net:: ERR_CONNECTION_REFUSED您可以像这样设置监听器: page.on('requestfailed', err => console.log(err));

Puppeteer的文档包含完整的事件列表.您应该查看您正在使用的版本的文档,并查看Page类将发出的不同事件以及这些事件将返回的内容.我上面写的例子将返回一个Puppeteer请求类的实例.

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