Puppeteer page.evaluate函数日志断点调试 Console.log 失效

Puppeteer 中 Page 是浏览器 Browser 实例的一个网页,也就是说一个 Tab 。一个 Browser 实例可以有多个 Page 实例。最近在学习 Page API 时,需要对其中一个函数 evaluate 调试,但在控制台死活打不出日志。

最后在 Github 上找到类似 issues,终于搞明白相关内容。

page.evaluate

先写个简单 demo,将问题展示出来。

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.jianshu.com/u/13d5ac734bc1');
    console.log('before');
    //这里是测试方法
    await testEvaluate(page);
    await page.screenshot({
        path: 'example.png',
        fullPage: true
    });

    await browser.close();
})();

async function testEvaluate(page) {
    console.log("hah");
    page.evaluate(async () => {
        //打印日志
        console.log("xixi");
    });
}

代码非常简单,就是打开浏览器并打开网页然后截图,截图前在页面Tab实例上下文中执行了一个方法,方法内容很简答就是打印一个日志。

但是运行后你会发现,console.log("xixi"); 并没有在控制台输出。

因为 page.evaluate 函数内容的运行都在浏览器中完成的,而不是在 node.js 中,所以控制台并不会输出,甚至我们在控制台对此函数内打断点调试也不会有效果。

因为该函数内容运行在浏览器,所以控制台不会输出,浏览器控制台倒是看到日志的输出。

这里我们来修改代码测试一番。

要看到浏览器控制台的输出,首先将整个 Puppeteer 流程降速,放缓点。这里设置每运行一行代码,做一个操作都停顿 3 秒。

slowMo: 3000,

同样浏览器要看到控制台,打开浏览器时要切换成调试模式,也就是平常我们按的 F12 ,这里我们在代码中设置,打开时就会进入开发模式。

devtools: true

同样因为 page.evaluate 是运行在浏览器中的代码,不能用无头模式启动浏览器,不然会报错,有兴趣可以试一试。

 headless: false,

以上代码整理

    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 3000,
        devtools: true
    });

然后运行,切换到 Console 可以看到日志

《Puppeteer page.evaluate函数日志断点调试 Console.log 失效》

 

ok,希望本文能解决你的疑问,如果帮到你 点个赞可以么

怎么说呢?不管有用没,还是想加上这句
老郭种树原创,转载请加上Puppeteer page.evaluate函数日志断点调试 Console.log 失效
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注