電子書籍「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 パネルも試してみたい。

コメント

タイトルとURLをコピーしました