如何得到所有的控制台消息与木偶? 包括错误,CSP 违规,失败的资源,等

我正在获取一个有木偶操纵者的页面,这个页面在浏览器控制台中有一些错误,但是木偶操纵者的控制台事件并没有被所有的控制台消息触发。

操纵者 chrome 浏览器显示多条控制台消息

multiple console messages

然而,木偶师只在控制台记录一件事情在节点

console logs one thing in node

下面是我目前使用的脚本:

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

编辑: 正如我在下面的评论中所说,我尝试了 Everetts 推荐的 page.wait For (5000)命令,但是没有起作用。

编辑2: 从 msg.text中移除扩展操作符,因为它是偶然出现在那里的。

编辑3: 我在 github 上用类似但不同的例子截图打开了一个问题: https://github.com/GoogleChrome/puppeteer/issues/1512

54692 次浏览

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

有关控制台 API 的完整列表,请查看 MDN 上控制台的文档: Https://developer.mozilla.org/en-us/docs/web/api/console

之所以需要多个侦听器,是因为您发布的图像中记录的一些内容并没有发生在 呼叫中。

例如,为了捕获图像中的第一个错误,net:: ERR_CONNECTION_REFUSED需要像下面这样设置侦听器: page.on('requestfailed', err => console.log(err));

木偶师的文档包含一个完整的事件列表。您应该查看所使用版本的文档,并查看 Page 类将发出的不同事件以及这些事件将返回什么。上面我编写的示例将返回 Puppeteer 的请求类的一个实例。

Https://github.com/googlechrome/puppeteer/blob/master/docs/api.md#class-page

关于捕获控制台错误的 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)

另请参阅与 console事件response一起接收的 控制台消息的类型,与其他事件一起接收的 requestfailure对象。

如果你想用一些颜色来装饰你的输出,你可以添加 粉笔、彩笔、彩笔或其他:

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

上面的例子使用 PuppeteerAPI v2.0.0

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

来自 木偶师 API 文档:

dumpio: < boolean > 是否管道化浏览器进程 stdout 和 stderr 进入 process.stdoutprocess.stderr。默认为 false

示例代码:

const puppeteer = require('puppeteer');


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


...


})();

在下一个注释中,我用来自 JSHandle consoleMessage对象的描述性错误文本扩展了 费迪南德的优秀注释代码。因此,您可以从浏览器中捕获所有错误,并像在浏览器控制台中那样读取所有描述。

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