頁面審覈工具 Chrome Lighthouse 簡介

做者：Bolaji Ayodeji

翻譯：瘋狂的技術宅

原文：www.freecodecamp.org/news/introd…

未經容許嚴禁轉載

Chrome Lighthouse 已經存在了一段時間了，但若是我要求你解釋一下它能作什麼，你能解釋清楚嗎？

我發現許多 Web 開發人員包括初學者，都沒有據說過這個工具，而那些還沒有嘗試過的人，一點也不酷 😒。

在本文中，我將向你介紹 Chrome Lighthouse 的做用以及如何使用它。

讓咱們開始吧 😄

---

根據維基百科，lighthouse是一座塔樓、建築物或其餘類型的結構，它用燈和鏡頭系統發出光線，做爲海上或內陸水道船舶的導航設備。

好吧，讓咱們把它變成一個技術術語;

Lighthouse 是一個塔樓，建築物或其餘類型的結構，它在 Chrome 開發者工具的「審覈」面板下的系統發出光線，並做爲開發人員的指南

有道理嗎？😄

好吧，Lighthouse 是 Google 開發的一款工具，用於分析網絡應用和網頁，收集現代性能指標並提供對開發人員最佳實踐的意見。

能夠將 Lighthouse 看做是汽車中用來檢查和平衡汽車速度限制的車速表。

通常狀況下 Lighthouse 與開發最佳實踐和性能指標一塊兒使用。它在 Web 應用上運行檢查，併爲你提供有關錯誤的反饋、低於標準的實踐、更好的性能提示以及如何解決這些問題。

根據 Google Developers Docs 上的描述

Lighthouse 是一種開源的自動化工具，用於提升網頁質量。你能夠在任何網頁上運行它。它可以針對性能、可訪問性、漸進式 Web 應用等進行審覈。

你能夠在 Chrome DevTools 中從命令行運行 Lighthouse，也能夠做爲 Node.js 模塊運行。當你向 Lighthouse 提供了一個 URL 來進行審覈時，它會針對該頁面運行一系列審覈，而後生成一個關於該頁面執行狀況的報告。這份報告能夠做爲如何改進頁面的指標。每次審覈都會產生一份參考文檔，解釋了這些審覈爲何重要，以及如何解決等內容。

這幾乎都與 Lighthouse 有關，它會審覈 Web 應用的 URL 並根據 Web 標準和開發人員最佳實踐生成一份報告，告訴你 Web 應用的糟糕程度。報告的每一個部分還附有文檔，說明你的應用哪些部分已經經過審覈，爲何你應該改進應用的某一部分以及如何去解決它。

如下是此博客bolajiayodeji.com的lighthouse審覈報告演示

左：個人博客😄 右：Lighthouse 審覈報告

很酷吧？😉

應該注意的是，在個人第一次審計中，並無獲得這樣的好成績。因此我用第一份報告來修復和改善本身程序的性能和質量。

這是 Lighthouse 目的：它識別和修復影響你網站性能、可訪問性和用戶體驗的常見問題。

---

如今，讓咱們進入到有趣的部分，如何開始使用它!!

LightHouse 有三種工做流程

• Chrome 開發者工具
• 命令行 (Node.js)
• Chrome 擴展程序

我我的更喜歡在 Dev Tools 中使用 LightHouse。使用擴展程序沒有意義，由於開發工具和擴展程序在同一個 Chrome 瀏覽器中工做，咱們的偏好不一樣，你能夠選擇最適合本身的方法。

Lighthouse 在添加到 Chrome DevTools 以前首先只能使用 Chrome 擴展程序。

在命令行上使用 lighthouse 也很酷，（對於極客來講😉）

讓咱們開始吧！！！

---

[1] 在Chrome DevTools 中運行 Lighthouse

• 下載谷歌瀏覽器網頁瀏覽器此處

注意：Lighthouse 只能在桌面上運行

• 轉到你要在 Google Chrome 中審覈的 URL。

你能夠審覈網絡上的任何 URL。

• 打開 Chrome DevTools

Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS).
複製代碼

• 單擊 Audits 面板

左側是將被審覈的頁面，這是個人博客😄。右側是 Chrome DevTools的 Audits 面板，如今由 Lighthouse 提供支持

• 點擊 Run audits

DevTools 顯示審計類別列表。確保將它們所有被選中。若是你想個性化要審覈的哪一個部分，能夠經過選中要審覈的類別來設置。

• 60 至 90 秒後 —— 根據你的網速，Lighthouse 會在頁面上爲你提供報告。

並不是只有網速和預安裝的擴展可能會影響lighthouse審覈。爲了得到更好的體驗，請在 Icognito模式下進行審覈來避免全部的干擾

[2] 在命令行中運行lighthouse

• 下載谷歌 Chrome 瀏覽器
• 下載 Node.js，若是已安裝，請跳過此步驟！
• 安裝 Lighthouse

npm install -g lighthouse
# or use yarn:
yarn global add lighthouse
複製代碼

用 -g 選項將其安裝爲全局模塊。

• 運行審覈

lighthouse <url>
複製代碼

例如：

lighthouse https://bolajiayodeji.com/
複製代碼

Lighthouse 默認生成 HTML 格式的報告文件。你能夠經過添加控制選項來控制輸出的格式。

報告可以以 HTML 或 JSON 格式顯示。

輸出樣本：

lighthouse
# saves `./<HOST>_<DATE>.report.html`

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves `./report.html`

# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`

lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# saves `./report.json`
複製代碼

經過運行 $ lighthouse --help 來查看爲 CLI 選項

[3] 使用 Chrome 擴展程序運行 Lighthouse

正如我以前所說，DevTools工做流程是最好的，由於它除了與擴展工做流程相同以外，還有額外的好處：無需進行安裝。

To use this method you need to install the extension, but If you have your reasons, here is the guide; 要使用此方法，你須要安裝擴展程序，若是你有本身的理由的話。這是按照指南：

• 下載谷歌 Chrome 瀏覽器
• 從 Chrome 網上應用店安裝 Lighthouse Chrome 擴展程序。
• 導航到要審覈的頁面
• 點擊 Lighthouse 圖標。

它應該在 Chrome 地址欄旁邊。若是沒有，請打開Chrome的主菜單（右上角的三個點），而後在菜單頂部訪問它。點擊後會展開 Lighthouse 菜單。

• 單擊 Generate report。

Lighthouse 會針對打開的頁面運行審覈，而後打開一個新選項卡，其中包含結果報告。

Bingo! 你作到了～

---

就這些，Lighthouse 是一個很好的工具，尤爲適合初學者。

在審覈 Progressive Web 應用時，它是一個很是有用的工具。

當我開始使用 Lighthouse 時，實際上學到了不少優化和性能標準。相信你很快就可以成爲可以構建具備出色性能、可訪問性和用戶體驗的 Web 應用專家。 :)

*Lighthouse 不是魔術，它是由人類創造的。它是開源的，歡迎對其做出你的貢獻。能夠經過查看 github 上的 issue 跟蹤器，找到能夠修復的錯誤，或者建立和改進審覈過程。issue 跟蹤器也是討論審計指標，新審計想法或與 Lighthouse 相關的任何內容的好去處。*😄

歡迎關注前端公衆號：前端先鋒，領取前端工程化實用工具包。