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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 開發人員工具的「Coverage」面板可協助您找出未使用的 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 造成以下問題： 原因：

  • 額外的程式碼會拖慢網頁載入速度。請參閱「Render-Blocking CSS」。
  • 如果使用者在行動裝置上存取該頁面，額外的程式碼就會佔用 他們的行動數據網路。

開啟「涵蓋率」面板

  1. 開啟指令選單。

  2. 開始輸入 coverage 並選取「Show Coverage」指令，然後 按下 Enter 鍵執行指令。系統會在以下位置開啟「涵蓋率」面板： 導覽匣。

    「涵蓋率」面板。

記錄程式碼涵蓋率

擷取程式碼涵蓋率：

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

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

  3. 如要停止記錄程式碼涵蓋率，請按一下 stop_circle。

分析程式碼涵蓋率

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

按一下資料列，在「Sources」面板中開啟該資源，即可查看逐行分析資料，瞭解已使用的程式碼和未使用的程式碼。任何未使用的程式碼行都會以紅線標示，左側則有行號。

程式碼涵蓋率報表。

  • 「網址」欄是受分析資源的網址。
  • 「類型」欄會顯示資源是否包含 CSS、JavaScript 或兩者並行
  • 「Total Bytes」資料欄是資源的總大小，以位元組為單位。
  • 「Unused Bytes」資料欄是指未使用的位元組數。
  • 最後一個未命名的資料欄是「Total Bytes」(總位元組) 的視覺化資料， Unused Bytes 資料欄。長條的紅色部分是未使用的位元組。 灰色部分會使用位元組。

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

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

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

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

如要匯出報表，請點按「下載」。