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

ソフィア・エメリアノバ
Sofia Emelianova

DevTools の [レンダリング] タブの機能の概要で、ウェブ コンテンツのレンダリングに影響するさまざまなオプションをご確認ください。

概要

[レンダリング] タブでは、次のことを行えます。

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

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

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

  1. DevTools を開きます

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

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

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

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

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