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

Sofia Emelianova

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

概要

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

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

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

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

1. DevTools を開きます。

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

   

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

重要なポイント: [Rendering] タブを開くほか、コマンド メニューを使用して任意のオプションを検索して有効にすることもできます。オプション名（例: emulate）を入力してください。

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

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