里面的 Puppeteer 日志 page.evaluate

Question

我如何 console.log page.evaluate 中的内容，将其传递给节点并在页面评估期间使用它？

我实际上想将 page.evaluate 的进度记录到控制台并向用户显示一些结果。

Answer 1

在此代码示例中实现 notifyUi 函数：

const page = await browser.newPage();
page.on('console', (...args) => {
    this.notifyUi('[chrome] ' + args[0]);
});
await page.goto(url);
const result = await page.evaluate(() => {
    console.log('I am alive');
    return Promise.resolve(true);
});
this.notifyUi('Evaluation returned with ' + result);

Answer 2

puppeteer 12 更新，改编自the current documentation：

page.on('console', async (msg) => {
  const msgArgs = msg.args();
  for (let i = 0; i < msgArgs.length; ++i) {
    console.log(await msgArgs[i].jsonValue());
  }
});

await page.evaluate(() => console.log('hello', 5));
await page.evaluate(() => console.log({ foo: 'bar' }));
await page.evaluate(() => console.log([1, 2, 3, 4, 5]));

显示以下结果：

hello  
5  
{ foo: 'bar' }  
[ 1, 2, 3, 4, 5 ]

Answer 3

我喜欢@ 的回答，但是当您可能只需要文本时，您将记录整个 ConsoleMessage 对象。因此，我个人使用以下：

const EOL = require('os').EOL;
const _page = await browser.newPage();

_page.on('console', _fCleanLog);

function _fCleanLog(ConsoleMessage) {
    console.log(ConsoleMessage.text + EOL);
}

Answer 4

const page = await browser.newPage();
page.on('console', ConsoleMessage => console.log(ConsoleMessage.text));

Answer 5

以最简单的方式让它完全按照您的预期工作

const page = await browser.newPage();
page.on('console', (log) => console[log._type](log._text));

Answer 6

以前提供的许多答案今天不再适用。在某些页面上还有一件非常烦人的事情是 "warning" 消息，它会污染输出。解决该问题的一种方法是过滤消息的类型。以下代码有助于减少噪音并适用于当前版本的 Puppeteer：

const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('console', consoleMessageObject => function (consoleMessageObject) {
    if (consoleMessageObject._type !== 'warning') {
        console.debug(consoleMessageObject._text)
    }
});

await page.goto('https://google.com');
const result = await page.evaluate(() => {
    console.log('Browser scope.');
    return 'Normal scope.';
});
console.log(result)

Answer 7

const page = await browser.newPage();
page.on("console", msg => {
for (let i = 0; i < msg.args().length; ++i)
console.log(`${i}: ${msg.args()[i]}`);
});

如果上述 none 有效，请尝试这个。不显示错误日志，只显示我创建的日志。

Answer 8

版本 1 的更新。15.x 及更高版本 - 2020 年 1 月

在最新版本中，args 已替换为 _args。

所以当你使用 page.evaluate() 或 page.evaluateHandle() 并且你想从浏览器上下文中获取 console.log() 文本返回到节点时，使用以下代码并确保设置在任何 console.log() 调用之前的监听器：

代码：

    // First we register our listener.
    page.on('console', msg => {
    for (let i = 0; i < msg._args.length; ++i)
        console.log(`${i}: ${msg._args[i]}`);
    });

    // Then we call the log.
    page.evaluate(() => console.log('Hello World'));

解释：

您无法在节点控制台中看到 console.log() 文本或在 page.evaluate() 或 page.evaluateHandle() 中设置节点断点，因为这些函数中的代码是运行仅在浏览器上下文中。如果您以 none 无头模式启动 puppeteer，您会在浏览器中看到 console.log() 消息。

旁注：

在大多数情况下，您实际上并不需要在浏览器上下文中登录，您可以在浏览器 'Developer tools' 部分的 'Console' 选项卡中完成相同的工作。

Answer 9

如果将来对任何人有帮助，我会尝试分享我的解决方法。

将所有控制台输出打印到标准输出，包括警告、错误、日志：

page = await browser.newPage();
page.on("console", (consoleObj) => console.log(consoleObj.text()));

打印除警告之外的所有内容：

page.on('console', consoleObj => {
    if (consoleObj.type() !== 'warning') {
        console.log(consoleObj.text());
    }
})

仅打印日志（例如：console.logs）。

page.on('console', consoleObj => {
    if (consoleObj.type() === 'log') {
        console.log(consoleObj.text());
    }
})

最后一个帮助我更有效地调试。

Answer 10

我分享 this solution 给未来更想知道如何获取评估返回值的读者。

const element = await page.$("a selector");
const text = await page.evaluate(element => element.textContent);

Answer 11

await page.evaluate(()=>{
      var string = 'I want to print this';
      return string;
}).then(console.log);

Answer 12

2021 年的今天与 puppeteer 8.x.x 的主要答案没有向我们展示控制台对象的完整描述。例如，您无法获取所有错误堆栈跟踪文本，message.text() 仅包含一些有关 js 错误的信息。

我在此处的另一条评论中执行此操作的最佳方法

里面的 Puppeteer 日志 page.evaluate

Puppeteer log inside page.evaluate

javascript

node.js

puppeteer