頁面審覈工具 Chrome Lighthouse 簡介[每日前端夜話0x88]

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 應用的糟糕程度。報告的每一個部分還附有文檔，說明你的應用哪些部分已經經過審覈，爲何你應該改進應用的某一部分以及如何去解決它。

如下是此博客https://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

1Command+Option+C (Mac)
2Control+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

1npm install -g lighthouse
2# or use yarn:
3yarn global add lighthouse

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

• 運行審覈

1lighthouse <url>

例如：

1lighthouse https://bolajiayodeji.com/

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

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

輸出樣本：

1lighthouse
 2# saves `./<HOST>_<DATE>.report.html`
 3
 4lighthouse --output json
 5# json output sent to stdout
 6
 7lighthouse --output html --output-path ./report.html
 8# saves `./report.html`
 9
10# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
11lighthouse --output json --output html --output-path ./myfile.json
12# saves `./myfile.report.json` and `./myfile.report.html`
13
14lighthouse --output json --output html
15# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
16
17lighthouse --output-path=~/mydir/foo.out --save-assets
18# saves `~/mydir/foo.report.html`
19# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
20
21lighthouse --output-path=./report.json --output json
22# 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 相關的任何內容的好去處。

原文：https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/