対象範囲: 使用していない JavaScript と CSS を見つける

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

[カバレッジ] パネルを使用すると、使用されていない 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をご覧ください。
  • ユーザーがモバイル デバイスでページにアクセスすると、余分なコードによってモバイルデータが消費されます。

[カバレッジ] パネルでは、ページを記録し、CSS リソースと JavaScript リソースの使用済みバイト数と未使用バイト数の合計のレポートを表示して、[ソース] パネルでコードを追跡できます。

[カバレッジ] パネルを開く

  1. DevTools を開きます。
  2. コマンド メニューを開きます。

  3. coverage と入力し、[**カバレッジを表示**] コマンドを選択して、 [Enter] キーを押してコマンドを実行します。[カバレッジ] パネルが [ドロワー] に開きます。

    [カバレッジ] パネル。

または、右上の more_vert [**その他のオプション**] > [**その他のツール**] > [**カバレッジ**] を選択します。

コード カバレッジを記録する

コード カバレッジをキャプチャするには:

  1. カバレッジのスコープを設定するには、[カバレッジ] パネルの上部にあるアクションバーで、プルダウン リストから [関数ごと] または [ブロックごと] を選択します。

  2. 記録を開始するには、パネルの中央にある [] [Reload] ボタンをクリックします。[カバレッジ] パネルでページが再読み込みされ、ページの読み込みに必要なコードがキャプチャされます。ページの操作中も記録は続行されます。

  3. コード カバレッジの記録を停止するには、パネルのアクションバーにある [**カバレッジの計測を停止して結果を表示**] をクリックします。

コード カバレッジを分析する

[カバレッジ] パネルの表には、分析されたリソースと、各リソース内で使用されているコードの量が示されます。

行をクリックすると、[ソース] パネルでそのリソースが開き、使用されているコードと使用されていないコードの内訳が 1 行ずつ表示されます。使用されていないコード行は、左側の行番号の列の横に縦のグレーの線でマークされます。

コード カバレッジ レポート。

  • [URL] 列は、分析されたリソースの URL です。
  • [タイプ] 列には、リソースに CSS、JavaScript、またはその両方が含まれているかどうかが表示されます。
  • [合計バイト数] 列は、リソースの合計サイズ（バイト単位）です。
  • [未使用バイト数] 列は、使用されていないバイト数です。
  • [使用状況の可視化] 列は、[合計バイト数] 列と [未使用バイト数] 列を可視化したものです。バーのグレーの部分は未使用のバイト数です。緑色の部分は使用されているバイト数です。

URL でレポートをフィルタするには、アクションバーのフィルタで指定します。

[カバレッジ] パネルの下部にあるステータスバーには、使用されているコードの割合が表示されます。ステータスバーではフィルタが考慮されます。

フィルタバーの横にあるプルダウン リストから、レポートに表示する [すべて]、[CSS]、[JavaScript] のいずれかを選択できます。

拡張機能のコードをレポートに含めるには、 [コンテンツ スクリプト] をオンにします。

レポートをエクスポートするには、 [**カバレッジをエクスポート**] をクリックします。