CSS
JavaScript
Chrome
ChromeDevTool

CSS/Javascriptの不要な部分をさくっと洗い出す

More than 1 year has passed since last update.

自分用メモも兼ねて。

見ているページ内で使われているCSSプロパティやJSの処理などを簡単に判別するため、Chrome 59からDevToolにCoverage機能が追加されているので使ってみます。

(2018/05/24現在はバージョン: 66.0.3359.181)

実際動かすとページのロード時にトレースして使われたコードを確認できます。

DevToolを開き[Console]タブの左にあるメニューから[Caverage]を選択してタブ追加。

左側の丸いレコードボタンを押すとトレース開始。(ボタンが赤くなる)

coverage1.png

緑が使用、赤が未使用。

coverage4.png

CSSだけでなくJSもどの行が実行されているか、実行されていないかも確認できます。

coverage2.png

coverage3.png

こんな感じ。

読み込んだページではこのようにして使用されていないプロパティや処理がわかります。

ですが、

昨今はWebpack等でCSS/JSファイルそれぞれをまとめて1つにしたりとかよく見かけますので、やたら簡単に削除してしまうと、同じCSS/JSファイルを使用している他のページでも影響あるかもしれません。

使用上の注意をよく読み用法・用量を守って正しくお使いください。

おわり