對於爬蟲，相信大家並不陌生。當希望得到一些網站的資料並做一些有趣的事時，必不可少要爬取網頁，用到爬蟲。而目前網路上也有很多爬蟲的教程資料，不過又尤以python語言居多。想來自己是做web的，就希望以js的方式解決問題，於是希望利用nodejs。今天介紹一款node的爬蟲利器：Puppeteer。

Puppeteer正如其名“木偶”，它允許我們像牽線木偶一樣操縱它。它是一個建立在DevTools協議上的提供控制無頭Chrome或Chromium的高階介面的Node庫。官網上對其應用舉了幾個例子：
- 生成網頁的截圖（目前僅支援支援jpeg、png格式）和pdf檔案
- 爬取SPA和非同步渲染網頁
- 自動錶單提交、鍵盤輸入、UI測試等
- 建立最新的自動測試環境，也就是說可以使用最新的瀏覽器特性
- 捕獲站點的時間線以幫助分析效能問題

Puppeteer本質上是一個headless chrome。無頭瀏覽器，相信如果大家做爬蟲肯定有所耳聞。其實就是一個沒有UI介面的瀏覽器，它包含了瀏覽器應該具有的功能，通常做web測試用，不過做爬蟲也是沒問題的。PhantomJS就提供這樣的功能，基於webkit核心，已經有好幾年歷史了。不過因為Puppeteer有背景（谷歌Chrome團隊開發），我最後還是選擇了Puppeteer。它們之間的不同點是後者只關注於Chromium或Chrome。這也導致了最坑的一點是總是繫結最新版本的Chromium。

上面說到Puppeteer會繫結最新版本的Chromium，這意味著每次使用npm i puppeteer

官網講到可以通過設定環境變數或配置npm config的方式避免下載。但設定環境變數我一直沒有成功，所以接下來講解配置npm config的方式。PUPPETEER_SKIP_CHROMIUM_DOWNLOAD引數可以避免下載，所以可以在安裝puppeteer之前使用下面的命令：

npm config set puppeteer_skip_chromium_download = 1
 

但這樣每次都要敲這個命令總不是辦法，所以可以將其寫入.npmrc檔案中。npm官網講到有四個影響npm配置的檔案，分別是：專案配置檔案(/path/to/my/project/.npmrc)、使用者配置檔案 (~/.npmrc)、全域性配置檔案($PREFIX/etc/npmrc)、npm內建配置檔案(/path/to/npm/npmrc)。可以使用npm config list來檢視影響npm的配置檔案有哪些。不過這裡面有個問題，就是上面的介紹文件是針對npm最新的6.0版本的。而一般隨nodejs下載的npm版本沒有這麼高，只是npm4.x，導致專案中的配置檔案不生效。可以從下面兩張圖片看到兩種版本的npm的配置檔案的不同（上面一張：npm4.0.2，下面一張npm6.0），可以看到後者多出一個project config列表。

身為強迫症的我，當然希望直接在專案目錄中更改配置檔案了，所以使用下面的命令安裝最新版本的npm：

npm install [email protected] -g

然後在專案目錄下建立.npmrc檔案，輸入以下配置命令：

puppeteer_skip_chromium_download = 1

這樣配置之後，就可以跳過下載了，如圖所示：

接著就可以使用它了，以官網的例子為例：

const puppeteer = require('puppeteer');

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

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

以為這樣就完了嗎？不，雖然跳過下載的事情解決了，但是因為沒有下載會導致puppeteer無法得知要使用的Chrome或Chromium在哪裡，所以還需要指明啟動路徑。修改一下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
      // headless: false,//不使用無頭chrome模式
      executablePath: 'C:\\Users\\sunbo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe',//path to your chrome
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

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

更改executablePath引數指向你本地chrome所在目錄，注意一定要指向chrome.exe才能正常使用。headless引數也是挺有趣的，如果其值為false，就會真的為我們啟動一個chrome程序，讓我們可以視覺化整個程式執行的過程。

好了，安裝配置好就可以盡情享受Puppeteer帶給我們的美好世界了。最後說一點，官網例子使用async/await和promise，所以有必要了解這些非同步知識，這些東西運用好，簡直打開了非同步程式設計的新世界。祝好運！！！