chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

chrome ディベロッパーツール 「Coverage」

chromeディベロッパーツールでCoverage機能を知っているでしょうか?? chrome 59 から使えるようになった機能ですので、使いたい場合はバージョンUPをしましょう。

js and css coverage

どのような機能かというと、使用・不使用のcssjsのコードを表示してくれる便利な機能になります。

使い方

f:id:chocotaka:20171128215539p:plain chromeディベロッパーツールを開いて、Coverageタブを開きます。

f:id:chocotaka:20171128220140p:plain レコードボタンを押してトレースを開始します。

f:id:chocotaka:20171128221156p:plain そうすると表示されているページで使用されているコードは、不使用のコードはで色が付いて表示されるようになります。

最後に

不要なコードを見つけることができるのでとても便利です。コードの改善にぜひご活用ください。