Chrome 控制台的执行方式是否与 Visual Studio Code 相同？答案

【问题标题】：Does the Chrome console execute things the same way as Visual Studio Code?Chrome 控制台的执行方式是否与 Visual Studio Code 相同？
【发布时间】：2018-11-03 14:32:18
【问题描述】：

我想在网络上抓取折扣链接，所以我已经这样做了。当我在控制台上测试我的代码时，data2（这是我存储的链接数组）正如我预期的那样是正确的。 data2 只列出有折扣的链接。

但是当我在 VSCode 的控制台上运行时，我得到了不同的结果（data2 现在拥有所有链接，而不仅仅是折扣链接）。

你能告诉我区别吗？我怀疑我在 VScode 中的“if”条件无法适应导致这种情况。

注意：我在 Chrome 上运行的代码是从 VSCODE 复制的，逻辑完全一样。

【问题讨论】：

console.log document，看看区别。您的桌面浏览器可能（很可能）与您用于抓取的浏览器不同。然后服务器可能会为每个人生成不同的documents。
请将您的代码作为文本发布，而不是在绘画中。
不要在您的退货声明中使用await result，result 不是承诺

标签： javascript node.js console web-crawler puppeteer

【解决方案1】：

您的代码存在一些问题。

首先，您尝试访问的页面会动态加载其内容，因此您可能希望使用page.waitForSelector() 将选择器字符串指定的元素添加到DOM：

await page.waitForSelector('#app > div > div.container > div.now-list-restautants > div > div > a > div.info-restaurant > p > i');

另外，在page.evaluate()内部，变量jq没有定义：

document.getElementsByTagName('head')[0].appendChild(jq); // jq is not defined

此外，您不必要地等待result 两次。你可以直接返回result:

return result;

最后，确保在抓取完链接后使用browser.close()：

await browser.close();

下面列出的其余问题与样式有关，不一定与功能有关。

您应该尽可能使用let 和const 而不是var (source)：

const arr = ... // good
var arr = ...   // bad

如果要将可迭代对象转换为数组，请使用spread syntax，而不是Array.from() (source)：

[...elements]        // good
Array.from(elements) // bad

您可以使用href 属性从元素中获取href 属性，因此您不需要使用getAttribute('href')：

element.querySelector('.item-content').href                 // good
element.querySelector('.item-content').getAttribute('href') // bad

这是一个完整的工作示例：

'use strict';

const puppeteer = require('puppeteer');

let scrape = async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  await page.goto('https://www.now.vn/ho-chi-minh/food/danh-sach-dia-diem-phuc-vu-ca-phe,nuoc-ep-sinh-to,16,70-giao-tan-noi');

  await page.waitForSelector('#app > div > div.container > div.now-list-restautants > div > div > a > div.info-restaurant > p > i');

  const result = await page.evaluate(() => {
    // document.getElementsByTagName('head')[0].appendChild(jq);
    const data2 = [];
    const elements = document.querySelector('#app > div > div.container > div.now-list-restautants > div').children;
    const arr = [...elements];
    const regex = '';

    arr.shift();

    arr.forEach((element, index) => {
      const tagi = document.querySelector('#app > div > div.container > div.now-list-restautants > div > div:nth-child(' + (index + 2) + ') > a > div.info-restaurant > p > i');

      if (element.contains(tagi)) {
        data2.push(element.querySelector('.item-content').href);
      }
    });

    return data2;
  });

  await browser.close();

  return result;
};

scrape().then(value => {
  console.log(value);
});

【讨论】：