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

Sofia Emelianova
Sofia Emelianova

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 內容指令碼

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