2019/10/21

不要なCSSやJavascriptをグーグルクロームのカバレッジで確認

こんにちは!

グーグルクロームの機能に、使用していないCSSやJavaScriptを洗い出してくれる開発ツールがあるのでその使い方を紹介いたします。

クロームのカバレッジ機能

今回はグーグルクロームにある、カバレッジ機能を使って、CSS、JavaScriptの不要コードを洗い出して、軽量化かつ、ソースを綺麗にしていきます。

カバレッジ (coverage )とは

カバレッジとは、取材範囲、補償範囲、受信範囲、対象範囲、被覆率などの意味を持つ英単語。カバーする範囲、カバー率の意。

開発者ツール

F12キーを押して、デベロッパーツールを開き、下部のConsole欄からCoverageタブを選択します。

左側の赤丸ボタンを押してトレースを開始

CSSやJavaScriptが表示されたので試しに1.8.0.jqury.min.jsをクリック

するとコードが表示されます。

緑が使用しているコード、赤が未使用のコードになります。

不要なコードを削減して、必要な物だけに書き換えることで、処理速度向上や、更新をしやすくコードを綺麗にすることができます。