为什么 puppeteer page.evaluate 中的 console.log 不起作用？答案

【问题标题】：Why console.log in puppeteer page.evaluate doesn't work?为什么 puppeteer page.evaluate 中的 console.log 不起作用？
【发布时间】：2020-03-01 20:56:04
【问题描述】：

从另一个开发人员那里得到了这个功能，我正在尝试调试它。这是一个基于 puppeteer 的网络爬虫。但由于某种原因，我无法在里面进行控制台登录。

有人可以指出我在这里缺少什么吗？

const getArticles = async (page) => {
  return await page.evaluate(() => {

  console.log('in page.evaluate')
//not printing anything in the console

    const products = document.querySelectorAll(".thumb-link")
    const formated = Array.from(products).map(x => x.href)
    console.log(22, formated)
    return Promise.resolve(formated.filter(x => x))
  });
}

let newArticles = await getArticles(page)

【问题讨论】：

它有效，但在您的浏览器中。不在您的节点控制台上。检查您的浏览器控制台
所以你可以在浏览器中找到它吗？
是的，谢谢！

标签： javascript web-scraping es6-promise puppeteer

【解决方案1】：

添加以下内容以查看浏览器的控制台日志：

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

【讨论】：

很好，它有效！但我不明白的是，如果它在浏览器中，那么我该如何做 document.querySelectorAll 并将结果保存到 Node.js 中存在的变量中？
@yoni349 那么你需要使用evaluateHandle 来处理返回的页内对象。如果只需要将元素带到 Nodejs 中，请使用 page.$$
感谢您的信息。但“querySelectorAll”实际上有效。我在“console.log”上得到一个“JSHandle@array”。但随后它被解析为我需要的“page.evaluate”数据。我实际上是在问最后一条评论它是如何工作的？如果“page.evaluate”在浏览器中运行，那么为什么其中的“querySelectorAll”会返回我需要的数据？我想也许因为最后我将数据返回给名为'page.evaluate'的对象？
@yoni349 我没有关注，querySelectAll 工作因为它正在浏览器上下文中进行评估。它类似于浏览器控制台。只要数据是可序列化的，您就可以使用evaluate 从浏览器上下文中返回（或将其传递给）。您收集的 hrefs 是可序列化的，但实际元素不是。