18
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

自分用メモも兼ねて。

見ているページ内で使われている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ファイルを使用している他のページでも影響あるかもしれません。

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

おわり

18
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?