網頁開發工具: Lighthouse, Puppeteer 及其之上丨 Google 開發者大會 2018
這次谷歌開發者大會請來了 Lighthouse 的工程師 - Eric Bidelman ，分享如何簡單地使用 Lighthouse, Puppeteer 來自動化我們日常的流程。它是一個開源的自動化工具，用於改進網路應用質量。您只需要提供網址，它就測試該頁面，並生成頁面效能報告。你看看可以採取哪些措施來改進您的應用。
Lighthouse 重視使用者的首次載入頁面速度，頁面首次顯示內容速度，有意義的內容顯示速度，以及可以互動的時間。
以一個頁面載入的週期為例，首先頁面會發送第一個位元組給使用者，然後顯示一些非空白的影象，然後顯示有意義的內容，然後展示所有內容，允許使用者點選或其他操作，然後完結整個載入週期。
使用方法
執行 Lighthouse 的方式有兩種：作為 Chrome 擴充套件程式執行，或作為命令列工具執行。Chrome 擴充套件程式提供了使用者友好的介面，方便讀取報告。而命令列工具允許您將 Lighthouse 整合到持續整合系統。
開發者工具
你只需要開啟 Chrome 的開發者工具，點選 Audits ，然後就可以看到 Lighthouse 介面：
擴充套件程式
你可以到chrome web store 下載並安裝 Lighthouse Chrome 擴充套件程式。
命令列工具
需求：Node.js >= 5
- 全域性安裝 lighthouse
npm install -g lighthouse 複製程式碼
- 然後輸入你的頁面
lighthouse https://example.com 複製程式碼
lighthouse 會自動生成 HTML 報告，你也可以使用 JSON 格式。
自動化部分
你也可以利用 TravisCI 來自動分析改動後的程式碼對於頁面效能的影響。
你只需要在 .travis.yml 裡面加入以下程式碼：
language: node_js script: - npm run lint - npm run build after_success: - ."./travis/deploy_pr_gae.sh" - export LH_MIN_PASS_SCORE=96 - export LH_TEST_URL=https://your.staging.server.com/ - node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE 複製程式碼
更多詳情可以觀看講師在 Github 上面的分享： ofollow,noindex">ebidel/lighthouse-ci
Puppeteer
底層
在談 Puppeteer 之前，我們需要提到上面是 Headless Chrome 。簡單來說，它是一個沒有檢視層的谷歌瀏覽器。
它允許你使用最新的瀏覽器來測試頁面，使用所有最新的屬性，比如說 CSS Grid 格局，Web 推送通知等。
最重要的是，它暴露開發者工具的可程式設計介面，比如說網路狀況，模擬裝置，程式碼覆蓋率。
例如你可以開啟一個 Socket/">WebSocket，然後監聽瀏覽器發生了什麼操作，比如說 CSS 的 getStyleSheetText ，DOM 的 markUndoableState 等。
你也可以到官網閱讀更加豐富的文件： chromedevtools.github.io/devtools-pr…
實戰部分
大部分你手動在瀏覽器裡面做的事情，它都可以做到。例如：
- 截圖並生成 PDF
- 自動填寫表格，UI 測試，鍵盤輸入
- 測試 Chrome 外掛
安裝方法
它會下載最新版本的 Chromium，以及暴露封裝好的接口出來給開發者使用。
值得注意的是，它的原始碼有很多 async/await 的操作，你也可以這樣操作你的程式碼。
npm i puppeteer --save 複製程式碼
講師也提供了很多例子，方便學習使用 Puppeteer。
截圖
比如說我要把 https://example.com 頁面截圖，儲存為 example.png 。我只需要寫幾行程式碼 ：
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();
})();
複製程式碼
頁面資料
你只需要使用 page.metrics() 方法就可以了，它會返回一個頁面資料物件。
程式碼覆蓋率
你可以使用 page.coverage 裡面的方法 startJSCoverage() ， startCSSCoverage() 來開始測試覆蓋率。以及使用 stopJSCoverage() , stopCSSCoverage() 來結束測試。
攔截網路請求
你可以攔截圖片的請求，甚至是把圖片的請求換成其他請求，例如 http 直接上 https，或圖片換成佔位圖。
生成報告
你可以通過程式碼生成 PDF，例如使用 page.pdf() 方法。
PPTRAAS
以上這些個案都是一些重複出現的日常例子。 Puppeteer as a service ]就把以上這些程式碼做了封裝，只需在 url 後續加入 url 引數，便可使用服務。
例如你可以使用 https://pptraas.com/screenshot?url=https://example.com/ 來截圖。
更多例子可以到 Puppeteer as a service 來使用服務。
其他優質的工具
Node Debugger 可以讓你開啟瀏覽器裡面的開發者工具來除錯 Node 程式。
Page Speed Insights 可以讓你透過谷歌的平臺來測試裡的網站，並生成報告。