フロントエンド開発をしていると、各ブラウザの開発ツールは本当に必須です。
今回CSSの整理を行う機会があり、自力で不要なセレクタを洗い出すのは無理だな~と思っていたところ、
Chrome59で追加された機能、CSS/JavaScriptのCoverage機能の存在を知りました。

Coverage機能を開発ツールに表示させる

・Windowsの場合、F12で開発者ツールを表示し、右上の・・・が縦向きになった設定ボタンをクリック。
・More tools > Coverageをクリック

開発者ツールの下部にCoverageタブが表示されます。

試してみる

・チェックしたいページを表示
・そのページでCoverage機能を開く
・左上のレコードボタン●をクリック

そのページ内で使用されているcssやjsのパーセンテージが表示されるだけでなく、
ファイル名をクリックすると、上のフレームにどの箇所が使われていて、どこが不要かまで緑と赤色で表示してくれます!!
これで、CSSやJSの整理が一目瞭然で本当に有難いです。

注意点

有難い機能ですが、信用して赤い箇所をファイルから削除しまくると大変なことになることもあります。
※レスポンシブの場合
　max-widthなどで値を設定している場合、画面幅によって不要CSSが切り替わります。
　各幅でチェックし、本当に赤い不要なセレクタや動作のみ削除しましょう。
 
※ページ数がたくさんある場合
　ページによって不要なCSSは異なります。あくまで開いているページでのチェックになりますので、ページごとにリロードして、不要な箇所をしっかり洗い出しましょう。
 
※コメント箇所やベンダープレフィックス
　不要箇所と判断されますので、誤って削除しないようにしましょう。

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。