52

如何在 page.evaluate 中 console.log 某些内容,将其传递给节点并在评估页面期间使用它?

我实际上想记录页面的进度。评估到控制台并向用户显示一些结果。

4

12 回答 12

87

puppeteer 12 的更新,改编自当前文档

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 ]  
于 2017-09-15T18:57:17.160 回答
14

让它完全按照您的期望工作的最简单方法

const page = await browser.newPage();
page.on('console', (log) => console[log._type](log._text));
于 2018-01-15T15:22:46.127 回答
9

以前提供的许多答案今天不再适用。在某些页面上可能非常烦人的一件事是污染输出的“警告”消息。解决此问题的一种方法是过滤消息的类型。以下代码有助于减少噪音并适用于当前版本的 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)
于 2018-03-04T22:38:45.840 回答
4

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

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

因此,当您使用page.evaluate()orpage.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'));

解释:

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

边注:

在大多数情况下,您实际上并不需要在浏览器上下文中登录,您可以在浏览器“开发者工具”部分的“控制台”选项卡中执行相同的工作。

于 2020-01-17T15:01:49.560 回答
4

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

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

_page.on('console', _fCleanLog);

function _fCleanLog(ConsoleMessage) {
    console.log(ConsoleMessage.text + EOL);
}
于 2017-11-23T17:25:08.170 回答
3

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

  1. 将所有控制台输出打印到标准输出,包括警告、错误、日志:

    page = await browser.newPage();
    page.on("console", (consoleObj) => console.log(consoleObj.text()));
    
  2. 打印除警告之外的所有内容:

    page.on('console', consoleObj => {
        if (consoleObj.type() !== 'warning') {
            console.log(consoleObj.text());
        }
    })
    
  3. 仅打印日志(例如:console.logs)。

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

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

于 2020-05-07T18:34:52.403 回答
3

实现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);
于 2017-09-13T15:57:33.140 回答
3
const page = await browser.newPage();
page.on("console", msg => {
for (let i = 0; i < msg.args().length; ++i)
console.log(`${i}: ${msg.args()[i]}`);
});

如果上述方法均无效,请尝试此方法。不显示错误日志,只显示我创建的日志。

于 2020-01-06T08:05:39.507 回答
2

我将这个解决方案分享给未来的读者,他们更想知道如何获得评估的返回值。

const element = await page.$("a selector");
const text = await page.evaluate(element => element.textContent);
于 2020-11-10T14:11:06.913 回答
0

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

我在这里的另一条评论中做到这一点的最佳方法https://stackoverflow.com/a/66801550/9026103

于 2021-03-25T14:35:06.053 回答
0
await page.evaluate(()=>{
      var string = 'I want to print this';
      return string;
}).then(console.log);
        
于 2021-01-02T19:39:42.713 回答
-1
const page = await browser.newPage();
page.on('console', ConsoleMessage => console.log(ConsoleMessage.text));
于 2017-12-27T16:05:09.300 回答