みなさん、こんにちは！
プロクラスの杉本です！
入社してコーティングをする機会が増え、Chromeのデベロッパーツールがあらためて便利だな思い、HTML、CSSの編集の他にどのような機能があるのか気になったので調べてみました！
調べてみると使えそうでおもしろい機能がありましたので、3つご紹介します！
Coverage機能
この機能は、表示されているサイト画面で機能していないCSSを見分けることができます。
機能していないCSSを削除することでCSSの容量を減らすことができます！
下記の画像の順番に沿って進めていただくと記述したCSSの画面になり、機能していないCSSが赤の部分で表示されます。
Shaw device frame機能
その名の通りではありますが、スマホなどのフレームが表示されます！
フレームに当てはめることでレスポンシブ時のデザインのイメージに役立ちそうな機能ですね！
下記の画像の順番に沿って進めていただくとデバイスフレームが出てきます。
Computed機能
最終的に適用されたCSSを一覧で見ることができます！
どのCSSが適用されているかすぐ分かるので、便利な機能ですね！
下記の画像の順番に沿って進めていただくと最終的に適用されたCSSが出てきます。
他にもデベロッパーツールにはいろいろな機能がありますが、これらを使いこなすことができると、よりコーティングの幅が広がりそうですね！