使用 Puppeteer Headless False 实现可视化爬虫

Puppeteer 是一个基于 Node.js 的自动化测试库，可以用于控制 Chrome 或 Chromium 浏览器，模拟用户的操作，比如输入、点击、滚动等等。在默认情况下，Puppeteer 是使用 Headless（无头）模式运行的，也就是说，它运行浏览器但是不显示 GUI。这种模式可以极大地提高爬虫的效率，但是也有些情况下我们需要可视化的爬虫。

在 Puppeteer 中，我们可以通过设置 headless 的属性值为 false 来实现可视化的爬虫，这样 Puppeteer 就会操作一个具有 GUI 的浏览器。这种模式下，我们可以看到浏览器的窗口，并且可以通过代码来实现 Firefox、Chrome 或 Chromium 等多种浏览器的操作。

安装 Puppeteer

在使用 Puppeteer 前，我们需要先安装它。我们可以使用 npm 来进行安装，具体操作如下：

npm install puppeteer

使用 Puppeteer Headless False

在使用 Puppeteer Headless False 之前，我们先来了解一下 Puppeteer 的基本用法。我们先创建一个名为 example.js 的文件，并输入以下代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  await page.screenshot({path: 'baidu.png'});

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

以上代码使用 Puppeteer 访问百度首页并进行截图操作。我们可以使用以下命令来运行它：

node example.js

如果一切正常，你将会在当前目录下看到一个名为 baidu.png 的截图文件。

接下来，我们将在代码中添加 headless 属性并将其设置为 false，来实现可视化的爬虫。具体代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  await page.waitForTimeout(5000); //等待5秒
  await page.type('#kw', 'hello world');
  await page.click('#su');
  await page.waitForTimeout(5000); //等待5秒
  await page.screenshot({path: 'baidu.png'});

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

在以上代码中，我们添加了 headless 属性并将其设置为 false，以实现可视化窗口。接着，我们使用 page.waitForTimeout() 方法来等待了 5 秒，再使用 page.type() 和 page.click() 方法进行浏览器输入和点击操作。最后，我们使用 page.screenshot() 方法来获取屏幕截图。

总结

通过使用 Puppeteer Headless False，我们可以实现基于浏览器 GUI 的可视化爬虫。但是，需要注意的是，这种模式下运行速度是比 Headless 模式慢的，且会占用较多的系统资源。因此，在选择 Headless 或非 Headless 模式时，需要根据实际需求进行权衡。