在 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 可以看到日志

 

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

本文由老郭种树原创，转载请注明：https://guozh.net/puppeteer-page-evaluate-consolelog-not-working/