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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools の [Coverage] パネルで、未使用の JavaScript や CSS コードを探すことができます。未使用のコードを削除すると、ページの読み込みが速くなり、ユーザーのモバイルデータを節約できます。

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

概要

ウェブ開発では、使用していない JavaScript や CSS を配布することはよくある問題です。たとえば、ページで Bootstrap のボタン コンポーネントを使用するとします。ボタン コンポーネントを使用するには、次のような Bootstrap のスタイルシートへのリンクを HTML に追加する必要があります。

...
<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 をご覧ください。
  • ユーザーがモバイル デバイスでそのページにアクセスした場合、追加のコードによってモバイルデータが消費されます。

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

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

  2. 「coverage」と入力して [Show Coverage] コマンドを選択し、Enter キーを押してコマンドを実行します。[Coverage] パネルが [Drawer] に表示されます。

    [カバレッジ] パネル

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

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

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

  2. 記録を開始するには、[更新] をクリックします。Start instrumentingcover and load page Coverage] パネルでは、ページが再読み込みされ、ページの読み込みに必要なコードがキャプチャされ、ページを操作している間も記録が続行されます。

  3. コード カバレッジの記録を停止するには、stop_circle [Stop instrumenting subscription and show results] をクリックします。

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

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

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

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

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

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

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

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

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

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