涵蓋範圍：找出未使用的 JavaScript 和 CSS

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

「涵蓋範圍」面板可協助您找出未使用的 JavaScript 和 CSS 程式碼。移除未使用的程式碼可加快載入網頁速度，並節省使用者的行動數據。

分析程式碼涵蓋率。

總覽

在網頁開發中，傳送未使用的 JavaScript 或 CSS 是常見問題。舉例來說，假設您想在網頁上使用 Bootstrap 的按鈕元件，如要使用按鈕元件，您需要在 HTML 中加入 Bootstrap CSS 樣式表的連結，如下所示：

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

這個 CSS 樣式表不只包含按鈕元件的程式碼，其中包含 所有 Bootstrap 元件的 CSS。但您並未使用任何其他 Bootstrap 元件。因此網頁會下載許多不需要的 CSS。額外的 CSS 會造成下列問題：

  • 額外程式碼會拖慢網頁載入速度，請參閱「阻斷算繪的 CSS」。
  • 如果使用者透過行動裝置存取網頁，額外程式碼會耗用行動數據。

您可以使用「涵蓋範圍」面板記錄網頁，並查看 CSS 和 JavaScript 資源的總使用位元組數和未使用位元組數的報表，以及在「來源」面板中追蹤程式碼。

開啟「涵蓋範圍」面板

  1. 開啟開發人員工具。
  2. 開啟命令選單。

  3. 開始輸入 coverage，選取「顯示涵蓋範圍」指令，然後按下 Enter 鍵 執行指令。「涵蓋範圍」面板會在「抽屜」中開啟。

    「涵蓋範圍」面板。

你也可以依序選取右上角的 more_vert「更多選項」 >「更多工具」 >「涵蓋範圍」。

記錄程式碼涵蓋率

如要擷取程式碼涵蓋率，請按照下列步驟操作：

  1. 如要設定涵蓋範圍，請在「涵蓋範圍」面板頂端的動作列中，從下拉式選單選取「依函式」或「依區塊」。

  2. 如要開始錄製，請按一下面板中央的「重新整理」重新載入按鈕。「涵蓋範圍」面板會重新載入網頁、擷取載入網頁所需的程式碼，並在您與網頁互動時繼續記錄。

  3. 如要停止記錄程式碼涵蓋範圍，請按一下面板動作列上的「stop_circle」「停止檢測涵蓋範圍並顯示結果」。

分析程式碼涵蓋率

「涵蓋範圍」面板中的表格會顯示分析的資源，以及每個資源中使用的程式碼量。

按一下資料列，即可在「來源」面板中開啟該資源，並逐行查看已用和未用的程式碼。任何未使用的程式碼行都會在左側的行號欄旁邊，以灰色垂直線標示。

程式碼涵蓋率報表。

  • 「網址」欄是所分析資源的網址。
  • 「類型」欄會顯示資源是否包含 CSS、JavaScript 或兩者。
  • 「總位元組」欄會顯示資源的總大小 (以位元組為單位)。
  • 「未使用的位元組數」欄顯示未使用的位元組數。
  • 「使用量視覺化」欄會以視覺化方式呈現「總位元組數」和「未使用的位元組數」欄。長條圖的灰色部分代表未使用的位元組。綠色部分代表已使用的位元組數。

如要依網址篩選報表，請在動作列的篩選器中指定網址。

「涵蓋範圍」面板底部的狀態列會顯示程式碼使用百分比。狀態列會將篩選條件納入考量。

在篩選列旁邊的下拉式選單中，選取「全部」，或只選取「CSS」或「JavaScript」，即可在報表中顯示這些項目。

如要在報表中加入擴充功能程式碼，請開啟「內容指令碼」。

如要匯出報表，請依序點選「下載」「匯出涵蓋範圍」。