電子書籍「Chrome Developer Tools 入門」を読んだ

kindle unlimited を利用しており、その対象だったので読んでみました。
知らなかった機能の存在が知れて良かったので紹介します。

普段 DevTools で使う機能がほぼ決まっていましたが、新たに使えそう、使ってみたい、と思った幾つかを挙げてみます。

1. 色のCSSプロパティー値のフォーマットを変更する
   #FFFFFF が rgb(255 255 255) など、別の表記に切り替えられる。
   自分は基本的に16進で記載しており、何らかのソフトで選んだ色が10進で表された場合は変換してました。rgb で書いて切り替えれば、変換が少し楽かなと。
   そのまま rgb で書けば良い気もするけど、表記が混在するのは統一感が無いので。
2. Console に XHR リクエストを表示する
   Console パネルに居ながらリクエストを見たいときに良いかも。
   必要なら Network パネルの該当リクエストにも飛べる。
3. minify（圧縮）されたコードを読みやすく展開する
   圧縮されている時点で読むのを諦めるので、（大抵は読みたくは無いのだが）展開できるなら読むかも。
4. Audits パネル
   サイトのパフォーマンス、アクセシビリティ、ユーザーエクスペリエンスを評価するものということだが、試してみたい。
   現在の最新 Chrome では Lighthouse パネルの様でした。
5. Layers パネル
   要素をレイヤーで表示してくれる。z-index も表現してくれる。
   こちらも試したいところ。
   既存サイトのメンテや、参考にするサイトの構造を確認するときに便利そう。
   Rendering パネルも試してみたい。