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

Question

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

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

但是，只有puppeteer控制台在节点

中记录一件事

以下是我目前使用的脚本：

else if(args[2].equals("a"))
           {
    FileReader outputFileInReadMode = new FileReader(args[1]);
    int count = 0;
    int ichr=0;
    while (ichr!=-1){ichr=outputFileInReadMode.read();count++);} //This measures the 
//current size of the output file
              chr = inputFile.read();

              while(chr != -1)
              {
                 outputFile.write(chr, count++); //Index to write to
                 chr = inputFile.read();
              }
              outputFile.flush();
           }

编辑：正如我在下面的评论中所述，我确实尝试了Everettss推荐的但没有工作的page.waitFor（5000）命令。

Edit2：意外地从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(); })(); 移除了传播操作符。

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

Answer 1

GitHub issue about capturing console erorrs包含一个great comment about listening to console and network events。例如，您可以注册控制台输出，网络响应和失败，如下所示：

  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)

另请参阅随其他事件一起收到的types of console messages和console event，response和request对象收到的failure。

如果您想用一些颜色来拉皮输出，则可以添加Chalk：

  const chalk = require('chalk')
  page
    .on('console', message => {
      const type = message.type().substr(0, 3).toUpperCase()
      const colors = {
        LOG: text => text,
        ERR: chalk.red,
        WAR: chalk.yellow,
        INF: chalk.cyan
      }
      const color = colors[type] || chalk.blue
      console.log(color(`${type} ${message.text()}`))
    })
    .on('pageerror', ({ message }) => console.log(chalk.red(message)))
    .on('response', response =>
      console.log(chalk.green(`${response.status()} ${response.url()}`)))
    .on('requestfailed', request =>
      console.log(chalk.magenta(`${request.failure().errorText} ${request.url()}`)))

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

Answer 2

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

来自Puppeteer API docs：

dumpio：是否通过管道传输浏览器进程stdout和stderr 分为process.stdout和process.stderr。默认为false。

示例代码：

const puppeteer = require('puppeteer');

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

    ...

})();

Answer 3

如果要捕获所有内容，则需要设置多个侦听器。当页面中的javascript调用控制台API消息（如console）时，会发出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

Answer 4

我在下一条评论中使用来自 JSHandle consoleMessage 对象的描述性错误文本扩展了 Ferdinand 出色的评论代码。因此，您可以从浏览器中捕获所有错误，并像在浏览器控制台中一样阅读所有描述。

看看那里https://stackoverflow.com/a/66801550/9026103