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 をご覧ください。
- ユーザーがモバイル デバイスでそのページにアクセスした場合、追加のコードによってモバイルデータが消費されます。
[カバレッジ] パネルを開く
- コマンド メニューを開きます。
「
coverage
」と入力して [Show Coverage] コマンドを選択し、Enter キーを押してコマンドを実行します。[Coverage] パネルが [Drawer] に表示されます。
コード カバレッジを記録する
コード カバレッジをキャプチャするには:
カバレッジ スコープを設定するには、[カバレッジ] パネルの上部にあるアクションバーで、プルダウン リストから [関数ごと] または [ブロックごと] を選択します。
記録を開始するには、[更新] をクリックします。Start instrumentingcover and load page Coverage] パネルでは、ページが再読み込みされ、ページの読み込みに必要なコードがキャプチャされ、ページを操作している間も記録が続行されます。
コード カバレッジの記録を停止するには、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をオンにします。
レポートをエクスポートするには、[ダウンロード カバレッジをエクスポート] をクリックします。