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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools の [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 が含まれています。しかし、 コンポーネントが含まれます。このページには 追加するだけで済みますこの追加の CSS は以下にとって問題となります。 理由:

  • この余分なコードにより、ページの読み込みが遅くなります。レンダリングをブロックする CSS をご覧ください。
  • ユーザーがモバイル デバイスでページにアクセスした場合、余分なコードで 接続する必要があります

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

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

  2. 「coverage」と入力し、[Show Coverage] コマンドを選択します。 Enter キーを押してコマンドを実行します。[カバレッジ] パネルが ドロワー。

    [カバレッジ] パネル。

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

コード カバレッジを取得するには:

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

  2. 記録を開始するには、refresh をクリックします。カバレッジを計測開始してページを再読み込みします [カバレッジ] パネルでページが再読み込みされ、ページの読み込みに必要なコードがキャプチャされて、ページを操作している間、記録が続行されます。

  3. コード カバレッジの記録を停止するには、stop_circle [カバレッジを停止して結果を表示] をクリックします。

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

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

行をクリックして [ソース] パネルでリソースを開き、使用されたコードと未使用のコードを行ごとに表示します。未使用のコード行は、左側の行番号の列の横に赤い線でマークされます。

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

  • [URL] 列は、分析されたリソースの URL です。
  • [タイプ] 列には、リソースに CSS、JavaScript、 または両方を選択できます
  • [Total Bytes] 列はリソースの合計サイズ（バイト単位）です。
  • [Unused Bytes] 列は、使用されなかったバイト数です。
  • 最後の名前のない列は、Total Bytes を可視化し、 Unused Bytes 列。棒グラフの赤色の部分は未使用バイトです。「 使用済みバイト数を表します。

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

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

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

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

レポートをエクスポートするには、[カバレッジをエクスポート] の [ダウンロード] をクリックします。