Puppeteer爬蟲實戰(二)

連接瀏覽器

上一篇說到了Puppeteer本質是使用了Chrome Devtools協議控制瀏覽器，本篇就說說連接方式。

常規Hook瀏覽器

此方式其實就是需要一個瀏覽器可執行文件（不同平台需要下載對應平台文件），Puppeteer有兩種方式，一種是安裝Puppeteer包時下載的文件，另一種是自己下載文件通過環境變量指向文件路徑就可以了（上篇文章有詳細介紹），下面的演示為了視頻我使用headless: false開啟了FullHead模式。
在vscode里面使用export可查看環境變量

以上是我習慣的環境變量設置（使用launch參數executablePath也可達到同樣效果，個人覺得環境變量更靈活），下面一段腳本來看看效果。

const puppeteer = require('puppeteer');

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

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

使用已經存在的瀏覽器

首先開啟瀏覽器遠程調試，配置端口

在瀏覽器的快捷方式加上 --remote-debugging-port=9222 即可，詳細配置
下面一段腳本來看看效果

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.connect({
    browserWSEndpoint: "ws://localhost:9222/devtools/browser/60442671-d10c-4236-b4e1-41c5f1d28b87",
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/');
  await page.screenshot({ path: 'cnblogs.png' });

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

上面的代碼可以看到browserWSEndpoint指定了一個地址，這個地址可以從下面獲取

使用了Edge，嘿嘿🤭
上圖看到了一些瀏覽器信息，主要是為了拿到browserWSEndpoint，切記這個地址是你打開的那個瀏覽器實例，也就是說每次打開后這個地址都會不同，測試的時候不要打開復制出來就關閉了，這樣就找不到這個瀏覽器實例了，並且上面的信息在HeadLess與FullHead模式中式不太一樣的。

現在已經能看到，Puppeteer的基本工作原理，下一篇將會介紹如何針對一個網站進行數據抓取，詳細對puppeteer進行設置。目前Puppeteer的優勢已經很明顯了，那就是可以作到在服務端渲染（后面的文章會介紹如何在容器內運行，並且實現FullHead模式），當然selenium也能實現。皮皮蝦😄

我的風擺月弄