Chromeのデベロッパーツール・・・便利なツールです。 自分もCSSの検証やデバイスサイズ別のレイアウトチェックなどに日常的に使用しております。 ですが、それだけではなく、まだまだ使える機能が色々とあることを再認識したので、特に使えそうだなと感じた機能を2つ取り上げてみました。
■Coverageを利用してCSSとJSファイルを整理
■LighthouseでパフォーマンスやSEO評価をチェック
［使い方］
・デベロッパーツールを立ち上げ、ドロップダウンメニューからMore tools > Coverageをクリック
・Coverageウィンドウ左上の●をクリックで、ページで使用中のCSSとJSがグラフ表示されます。
・ファイルを個別にクリックで、ソース内の使用している部分（緑）と、使用していない部分（赤）が色別表示されます。
この情報をもとに、不要なソースコードを削除するなどして整理することができると思います。 分かりやすく表示されるので、例えば継ぎ接ぎだらけで膨れ上がってしまったCSSファイルの不要箇所を洗い出すことなどに非常に有効だと思います。
※ただし注意点として・・・ ・あくまで、開いているページの使用中ソースのみが緑表示となるため、ウィンドウサイズで切り分ける等でアクティブでないセレクタや、ベンダープレフィックス、コメントなどの部分は赤表示となります。 ・開いていないページで使用している可能性もきちんと考慮する必要があります。
■LighthouseでページパフォーマンスやSEO評価をチェック
［Lighthouseとは］ Webページを品質に関する項目（パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA）ごとに採点してくれるツールです。
［使い方］
・デベロッパーツールを立ち上げ、Auditsタブをクリック。
各項目についてはこちらのページなどを参考にしてみてください（英語ですが・・・）。https://developers.google.com/web/tools/chrome-devtools/speed/get-started#baseline
・数秒〜数十秒ほど待った後に、こんな感じで採点結果が表示されます。
グリーン（90〜100点）が合格。 レッド（0〜49点）は不合格といった感じです。
詳細についてはこちら等を参考にしてみてください（日本語対応はまだの様ですが・・・）。 https://developers.google.com/web/tools/lighthouse/
SEOなどは、これで100点取れれば完璧ということにはなりませんが、ある程度の指標にはなるかと思います。 手軽にサイトチェックできるツールとして、利用できるのではないでしょうか。
