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」。
- 如果使用者在行動裝置上存取該頁面,額外的程式碼就會佔用 他們的行動數據網路。
開啟「涵蓋率」面板
- 開啟指令選單。
開始輸入
coverage
並選取「Show Coverage」指令,然後 按下 Enter 鍵執行指令。系統會在以下位置開啟「涵蓋率」面板: 導覽匣。
記錄程式碼涵蓋率
擷取程式碼涵蓋率:
如要設定涵蓋範圍範圍,請在「涵蓋率」面板頂端的動作列中,從下拉式清單中選取「依函式」或「個別區塊」。
如要開始記錄,請按一下「重新整理」。開始檢測涵蓋範圍並重新載入頁面 「涵蓋率」面板會重新載入頁面,擷取載入網頁所需的程式碼,並在你與網頁互動時繼續記錄。
如要停止記錄程式碼涵蓋率,請按一下 stop_circle。
分析程式碼涵蓋率
「涵蓋率」面板中的表格會顯示已分析的資源,以及各項資源中使用的程式碼數量。
按一下資料列,在「Sources」面板中開啟該資源,即可查看逐行分析資料,瞭解已使用的程式碼和未使用的程式碼。任何未使用的程式碼行都會以紅線標示,左側則有行號。
- 「網址」欄是受分析資源的網址。
- 「類型」欄會顯示資源是否包含 CSS、JavaScript 或兩者並行
- 「Total Bytes」資料欄是資源的總大小,以位元組為單位。
- 「Unused Bytes」資料欄是指未使用的位元組數。
- 最後一個未命名的資料欄是「Total Bytes」(總位元組) 的視覺化資料, Unused Bytes 資料欄。長條的紅色部分是未使用的位元組。 灰色部分會使用位元組。
如要依網址篩選報表,請在動作列的篩選器中指定該報表。
「涵蓋率」面板底部的狀態列會顯示已使用的程式碼百分比。狀態列會將篩選功能納入考量。
在篩選列旁的下拉式清單中選取「全部」,或是只選取「CSS」或「JavaScript」來在報表中顯示。
如要在報表中加入擴充功能程式碼,請啟用 check_box 內容指令碼。
如要匯出報表,請點按「下載」。