對于爬蟲，相信大家并不陌生。當希望得到一些網站的數據并做一些有趣的事時，必不可少要爬取網頁，用到爬蟲。而目前網絡上也有很多爬蟲的教程資料，不過又尤以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，下圖是我下載的一個界面?？梢钥吹较螺d了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)?？梢允褂?code>npm config list來查看影響npm的配置文件有哪些。不過這里面有個問題，就是上面的介紹文檔是針對npm最新的6.0版本的。而一般隨nodejs下載的npm版本沒有這么高，只是npm4.x，導致項目中的配置文件不生效?？梢詮南旅鎯蓮垐D片看到兩種版本的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，所以有必要了解這些異步知識，這些東西運用好，簡直打開了異步編程的新世界。祝好運?。?！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。