Webサイトを制作していると、
- 使われていないCSSが残っている
- 不要なJavaScriptを読み込んでいる
- ページを軽くしたい
と思うことがあります。
そんなときに便利なのが、Chrome DevToolsの「カバレッジ（Coverage）」機能です。
この機能を使うと、実際に読み込まれたCSSやJavaScriptのうち、どのコードが使用され、どのコードが使われていないかを確認できます。
今回は、Chrome DevToolsのカバレッジ機能の使い方を紹介します。
カバレッジ機能とは？
カバレッジ（Coverage）は、ページを表示したときに実際に実行・適用されたコードを計測する機能です。
例えばCSSなら、
- 使われたCSS
- 一度も使われなかったCSS
が分かります。
JavaScriptも同様に、
- 実行されたコード
- 実行されなかったコード
を確認できます。
不要なコードの整理や、パフォーマンス改善に役立つ機能です。
カバレッジを開く方法
- Chromeで対象ページを開く
- F12 または 右クリック →「検証」 をクリック
- Ctrl + Shift + P を押く
- 「Coverage」と入力
- Show Coverage を選択
画面下部に「Coverage」タブが表示されます。
計測する
Coverageパネルで、録画ボタン（●）をクリックします。
その後、ページをリロードします。
すると、読み込まれたCSS・JavaScriptの解析が始まります。
結果の見方
計測が終わると、ファイルごとの結果が表示されます。
表示される主な項目は次のとおりです。
| 項目 | 内容 |
|---|---|
| URL | 対象ファイル |
| Type | CSSまたはJavaScript |
| Total Bytes | ファイルサイズ |
| Unused Bytes | 使われていないコードのサイズ |
「Unused Bytes」が多いほど、そのページでは使用されていないコードが多いことを意味します。
どこが使われていないか確認する
一覧からCSSやJavaScriptをクリックすると、ソースコードが開きます。
このとき、
- 緑色 … 使用されたコード
- グレー … 使用されなかったコード
という色分けで表示されます。
不要なスタイルやJavaScriptを探すときに便利です。
注意点
Coverageで表示される結果は、その時点で実行された内容だけです。
例えば、
- メニューを開いたとき
- モーダルを表示したとき
- スライダーを操作したとき
に使われるCSSやJavaScriptは、操作しない限り「未使用」と判定されます。
そのため、結果を見てすぐに削除するのではなく、実際の動作を確認しながら判断することが大切です。
まとめ
Chrome DevToolsのカバレッジ機能を使えば、ページ内で実際に使われたCSS・JavaScriptを簡単に確認できます。
不要なコードを整理したいときや、パフォーマンス改善を行う際には便利な機能です。
