對於爬蟲，相信大家並不陌生。當希望得到一些網站的數據並做一些有趣的事時，必不可少要爬取網頁，用到爬蟲。而目前網絡上也有很多爬蟲的教程資料，不過又尤以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安裝使用它時都會下載最新版本的Chromium，該版本在Windows上大約是130Mb。本來下載npm包就很不易，還要下載一個一百多兆的東西更是難上加難了。當然可以使用cnpm，下圖是我下載的一個界面。可以看到下載了55分鐘，這固然有我網絡慢的問題，但是能不下載Chromium就儘量不下載了吧。
官網講到可以通過設置環境變量或配置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 npm@latest -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，所以有必要了解這些異步知識，這些東西運用好，簡直打開了異步編程的新世界。祝好運！！！