##chorome DevToolsとは
chorome上で右クリック押して検証から開けるやつ．
ElementでDOMとかCSSを操作してみたり，consoleでjsの操作をしたりする人が多いのでは．
詳しい説明はこちら．
##CSS Overview
chorome DevToolsに2020/7追加された新機能．
まだテスト段階みたいですが現状でも充分に活用できそうです．
特に，Webサイトの分析やレビューをする初学者の方におすすめです．
##使用方法
DevToolsを開き，
右上の歯車＞Experiments＞CSS Overviewにチェック
DevToolsを一旦閉じて，再度開くとタブに追加されます．
##できること
CSS Overviewで現状できることをQittaのトップページに使用しながら紹介します．
###Overview summery
ページのCSSの概要を確認できます．
要素の数や，外部CSS利用数などの具体的な数値を確認することができます．
###Colors
サイトに使用している色の一覧を確認できます．
背景色や文字色ごとに分けられており，各カラーをクリックすることでどの要素に対して色が付けられているかを確認することができます．
###Font info
サイトで使用されているフォントの種類，サイズ，ウェイトなどを確認できます．
こちらもクリックすることでどの要素に対して適用されているかを見ることができます．
###Unued declarations
使用されていない宣言を確認できます．
簡単に言うと，意味のない無駄なCSSが無いかを教えてくれます．
###Media queries
メディアクエリがどの値で区切られているのかを確認できます．
##まとめ
以上がCSS Overviewで現状できることです．
サイトレビューだけでなく自分で制作したサイトの最終確認にも活用ができそうです．
まだ実験的な段階ですので，今後使用方法や機能の追加もあるかもしれません．
個人的には，使用カラーの割合も分かるようになればいいなと思っています．