[レンダリング] タブの概要

Sofia Emelianova
Sofia Emelianova
GitHub

DevTools の [レンダリング] タブの機能の概要では、ウェブ コンテンツのレンダリングに影響する一連のオプションについて説明します。

概要

[レンダリング] タブでは、次のことができます。

  • レンダリング パフォーマンスの問題を確認する。再ペイント、レイアウト シフト、レイヤとタイル、スクロールに関する問題を特定し、レンダリングの統計情報や Core Web Vitals を確認できます。
  • CSS メディア機能をエミュレートする。コードやテスト環境で手動で指定しなくても、さまざまな CSS メディア機能でページがどのようにレンダリングされるかをテストできます。
  • その他の便利な効果を適用する広告フレームのハイライト表示、ページへのフォーカスのエミュレート、ローカルのフォントや画像形式の無効化、自動ダークモードの有効化、視覚障がいのエミュレートが可能です。

[レンダリング] タブを開く

[レンダリング] タブを開くには:

  1. DevTools を開きます。

  2. Command+Shift+P キー（Mac）または Ctrl+Shift+P キー（Windows、Linux、ChromeOS）を押して、コマンド メニューを開きます。

    コマンド メニュー、レンダリング

  3. 「rendering」と入力し、[レンダリングを表示] を選択して、Enter キーを押します。DevTools ウィンドウの下部に [Rendering] タブが表示されます。

または、次の方法で [レンダリング] タブを開くこともできます。

  • Esc キーを押してドロワーを開き、左上にある [その他のツール] その他 > [レンダリング] をクリックします。
  • 右上にあるその他のオプション アイコン その他 > [その他のツール] > [レンダリング] をクリックします。