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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 開發人員工具的「涵蓋率」面板可協助您找到未使用的 JavaScript 和 CSS 程式碼。移除未使用的程式碼可加快網頁載入速度，並節省使用者的行動數據用量。

正在分析程式碼涵蓋率。

總覽

刊登未使用的 JavaScript 或 CSS 是網站開發中的常見問題。舉例來說，假設您想要在網頁上使用「Bootstrap」的按鈕元件。如要使用按鈕元件，您必須在 HTML 中新增 Bootstrap 的樣式表連結，如下所示：

...
<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>
...

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

  • 這些額外程式碼會拖慢網頁載入的速度。請參閱「轉譯封鎖 CSS」一文。
  • 如果使用者透過行動裝置存取頁面，額外程式碼會佔用他們的行動數據。

開啟「涵蓋率」面板

  1. 開啟指令選單。

  2. 開始輸入 coverage，選取「Show Coverage」指令，然後按下 Enter 鍵執行指令。「Coverage」(涵蓋率) 面板會在「Drawer」(導覽匣) 中開啟。

    「涵蓋率」面板。

記錄程式碼涵蓋率

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

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

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

  3. 如要停止記錄程式碼涵蓋率，請按一下「stop_circle」stop_circle「停止檢測涵蓋範圍並顯示結果」。

分析程式碼涵蓋率

「涵蓋率」面板中的表格會顯示已分析的資源，以及各項資源中使用的程式碼數量。

按一下任一列，即可在「Sources」面板中開啟該資源，並查看所用程式碼和未使用的程式碼的逐行明細。只要是未使用的程式碼行，都會在對應的欄旁邊以紅線標示，左邊的行號。

程式碼涵蓋率報表。

  • 「URL」欄是分析資源的網址。
  • 「Type」欄會指出資源是否包含 CSS 和/或 JavaScript。
  • 「總位元組」資料欄是資源的總大小 (以位元組為單位)。
  • 「Unused Bytes」資料欄是未使用的位元組數。
  • 最後未命名的資料欄以視覺化方式呈現「Total Bytes」(總位元組) 與「Unused Bytes」(未使用位元組) 資料欄。長條的紅色部分未使用位元組。灰色區段使用位元組。

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

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

您可以在篩選列旁的下拉式清單中選取「全部」，或是只選取「CSS」或「JavaScript」，以便在報表中顯示。

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

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