🍭

Chrome DevTools の Rendering タブを使ってみよう

4 min read 1

はじめに

この記事は #EveOneZenn (Everyday One Zenn) vol.15 です。

Chrome DevTools に組み込まれている、ページの描画に関する機能を提供する Rendering タブについてまとめます。

前回:

https://zenn.dev/lollipop_onl/articles/eoz-vercel-pricing-2020

Rendering タブを表示する

Chrome DevTools の Rendering タブは メニュー(三点ドット)→ More tools → Rendering から表示できます。

Elements や Console といったメインのパネルが並んでいる上部のナビゲーションではなく、下部のナビゲーションで Rendering パネルが表示されます。

Rendering タブの機能

Rendering タブで使用できる各種機能を紹介します。

Paint flashing

ページ上で再描画が発生したエリアを緑色でハイライトします。
DOM の変化や CSS プロパティ、アニメーションの変化を可視化できます。

Image from Gyazo

Layout Shift Regions

レイアウトがシフトしたエリアを青色でハイライトします。
CSS の position プロパティの変化や画像読み込み時のガタつきを可視化できます。

Image from Gyazo

Layer borders

内部的なレイヤーとガイドをオレンジ、オリーブ、シアンでハイライトします。
ボーダーの色の意味は Chromium のソースコード debug_colors.cc のコメントに記載されているとおりです。

Frame Rendering Stats

フレームごとの処理能力や間引かれたフレームの分布、 GPU メモリの使用率を表示します。

Scrolling performance issues

タッチやホイール、その他のメインスレッドでの処理からスクロールを遅延させる可能性がある要素を青緑でハイライトします。

画像は Performance Analysis Reference  |  Chrome DevTools  |  Google Developers より引用

Highlight ad frames

広告と判定されるエリアを赤くハイライトします。

Hit-test borders

ヒットテスト領域の周辺のボーダーを表示します。

詳細不明...

Disable local fonts

@font-facelocal() を無効化します。
サーバーからフォントファイルをダウンロードさせたいときなどに有効にします。

チェックしたらページをリロードすることで反映されます。

Emulate a focusing page

ページ内にフォーカスを残します。
:focus 擬似クラスのスタイルを維持したい場合などに有効にします。

次のアニメーションでは、フォーカスされた状態を維持して DevTools を操作できるようにするため、この機能を有効にしています。

Image from Gyazo

Emulate CSS media type

CSS のメディアタイプを printscreen に強制します。
プリント用のスタイルを指定しているページのデバッグなどで便利です。

Emulate CSS media feature prefers-color-scheme

CSS のメディア特性 prefers-color-schemelightdark に強制します。
ライトモード・ダークモードに対応しているページのデバッグなどで便利です。

https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

Emulate CSS media feature prefers-reduced-motion

CSS のメディア特性 prefers-reduced-motionreduce に強制します。

https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion

Emulate vision deficiencies

ページで視覚障害のエミュレーションを強制します。
次の5つの視覚障害での見え方をエミュレートできます。

Blurred vision(霧視)

Protanopia(赤色盲)

Deuteranopia(緑色盲)

Tritanopia(青色盲)

Achromatopsia(全色盲)

参考