3D ビュー ツールを使用して、ページを 3D 空間で回転させることによる Web ページ内の DOM、z-index、および複合レイヤーの問題をデバッグします。 3D 視覚化は、DOM ツリー階層、z-index スタッキング コンテキスト ツリー階層、ページ上に作成される複合レイヤーを理解するのに役立ちます。
詳細な内容:
- はじめに
- 3D ビュー ツールを開く
- 3D キャンバスのズーム、パン、回転
- [コンポジット レイヤー] タブ
- [Z インデックス] タブ
- [DOM] タブ
- 3D キャンバスの上にあるツール バー
- 右下の移動コントロール
- 関連項目
概要
3D ビュー ツールを使用して、ページを 3D 空間で回転させることによる Web ページ内の DOM、z-index、および複合レイヤーの問題をデバッグします。 3D 視覚化は、DOM ツリー階層、z-index スタッキング コンテキスト ツリー階層、ページ上に作成される複合レイヤーを理解するのに役立ちます。
左側の 3D ビュー ツールには、次の 3 つのタブがあります。
[ 複合レイヤー ] タブには、Web ページ用にブラウザーによって作成される複合レイヤーが表示されます。 各レイヤーには、レイヤー内のコンテンツのリアルなレンダリングが含まれており、3D 空間でページを移動するときに包括的なエクスペリエンスを提供します。
[ Z インデックス ] タブには、スタッキング コンテキスト ツリーの 3D 表現が表示されます。 このタブを使用して、Web ページの z-index スタックの問題をデバッグします。
[ DOM] タブには、DOM ツリーの 3D 表現が表示されます。 このタブを使用して、すべての要素に簡単にアクセスできる DOM 全体を探索します。
右側の 3D キャンバスは、選択したタブとオプションに従って Web ページを表します。
ビデオ: 3D での Web のデバッグ
3D ビュー ツールを開く
3D ビュー ツールは、アクティビティ バーまたはクイック ビュー パネルで開くことができます。
キャンバスのスペースを最大限に活用するには、アクティビティ バーの 3D ビュー ツールを開きます。
要素ツールと 3D ビュー ツールを同時に使用するには、クイック ビュー パネルで 3D ビュー ツールを開きます。 これにより、3D キャンバスで表される DOM ツリー要素を表示できます。 これが既定値です。コマンド メニューの [3D ビューの表示] は、[クイック ビュー] パネルで開いていると示されます。
アクティビティ バーで 3D ビュー ツールを開きます
3D で視覚化する Web ページを開きます。 たとえば、 動物保護施設の デモ ページを使用します。
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl+Shift+I (Windows、Linux) または Command+Option+I (macOS) を押します。 DevTools が開きます。
DevTools の アクティビティ バーで、[ 3D ビュー ] タブを選択します。そのタブが表示されていない場合は、[ その他のツール ] (
) ボタンをクリックします。
アクティビティ バーに [3D ビュー] タブが開きます。
クイック ビュー パネルで 3D ビュー ツールを開きます
3D で視覚化する Web ページを開きます。 たとえば、 動物保護施設の デモ ページを使用します。
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl+Shift+I (Windows、Linux) または Command+Option+I (macOS) を押します。 DevTools が開きます。
クイック ビュー パネルが表示されない場合は、[DevTools のカスタマイズと制御] を選択し、[クイック ビュー パネルの切り替え] を選択します。 または、DevTools にフォーカスがある場合は、 Esc キーを押します。
クイック ビュー ツールバーで、[3D ビュー] タブを選択します。そのタブが表示されていない場合は、[その他のツール] (
) ボタンをクリックします。 クイック ビュー パネルで 3D ビュー タブが開きます。
ハードウェア GPU を搭載していないマシンでの開発用に WebGPU を有効にする
3D ビュー ツールは、WebGPU API を利用して高パフォーマンスのハードウェア GPU にアクセスします。 ハードウェア GPU を搭載していないマシンでは、開発環境でのみ次のフラグを有効にすることが回避策となります。
これらのフラグは、 3D ビュー ツールを開くための通常の前提条件ではありません。 ツールがコンピューターで動作する場合は、フラグを既定の設定のままにしてください。
注意: これらのフラグを有効にする場合は注意が必要です。
enable-unsafe-webgpu フラグを使用すると、サポートされていない構成でベストエフォートの WebGPU サポートが有効になり、セキュリティの問題が Web サイトに公開される可能性があります。 そのフラグは、独自の開発にのみ使用してください。
ignore-gpu-blocklist フラグはブラウザーの組み込みのソフトウェア レンダリング リストを上書きし、サポートされていないシステム構成で GPU アクセラレーションを有効にします。 これらのフラグは、 3D ビュー ツールだけでなく、ブラウザーにも影響します。
この回避策を試すには:
Microsoft Edge で、開いているタブに作業内容を保存できます。
edge://flagsに移動します。ignore-gpu-blocklistを検索し、フラグを [有効] に設定します。 直接edge://flags/#ignore-gpu-blocklistに移動することもできます。enable-unsafe-webgpuを検索し、フラグを [有効] に設定します。 直接edge://flags/#enable-unsafe-webgpuに移動することもできます。右下に [ 再起動 ] ボタンが表示されます。
[ 再起動 ] ボタンをクリックします。
Microsoft Edge が再起動します。
視覚化する Web ページに移動します。
Web ページを右クリックし、[ 検査] を選択します。
DevTools が開きます。
3D ビュー ツールを開きます。
Web ページをデバッグします。
デバッグが完了したら、
edge://flagsで、ignore-gpu-blocklistフラグとenable-unsafe-webgpuフラグを [既定] (または 無効) に設定し、右下の [ 再起動 ] ボタンをクリックします。
3D キャンバスのズーム、パン、回転
さまざまな角度から Web ページを表示するには、 3D ビュー ツールの右側に表示されている 3D キャンバスをズーム、パン、回転できます。
ページを拡大/縮小する
3D キャンバス上で Web ページを拡大または縮小するには、マウスのスクロール ホイールを使用するか、右下にあるスライダーを使用します。
パン ビュー (ボタン)
ページを左、右、上、または下にシフトするには、[ パン ビュー ] ![([パン ビュー] アイコン](index-images/pan-view-icon.png){kind=icon}
) ボタンをクリックし、マウスで 3D キャンバス上のページを目的の方向にドラッグします。
回転ビュー (ボタン)
マウスを使用してページを回転するには、[ 回転ビュー ] (![[ビューの回転] アイコン](index-images/rotate-view-icon.png){kind=icon}
) ボタンをクリックし、マウスを使用して 3D キャンバス上のページを希望の角度にドラッグします。
キーボードを使用してページを回転するには、3D キャンバス内をクリックしてフォーカスを置き、黒い枠線が表示されるようにしてから、方向キーを押します。
- ページを水平方向に回転するには、 左方向 キーまたは 右方向 キーを押します。
- ページを垂直方向に回転するには、 上方向 キーまたは 下方向 キーを押します。
ツールバーで [ パン ビュー ] ボタンまたは [ ビューの回転 ] ボタンのどちらが選択されているかに関係なく、キーを押すとページが回転します。
詳細については、このページのその他のセクションを参照してください。
[コンポジット レイヤー] タブ
[複合レイヤー] ビューの 3D キャンバスには、Web ページ用にブラウザー レンダリング エンジンによって作成されたレイヤーの一覧が表示されます。
[コンポジット レイヤー] ビューを使用すると、CSS コードによって作成されるレイヤーの数、レイヤーの大きさ、変更の頻度を分析できます。
右側の 3D キャンバスで、Web ページの要素を選択します。 [ コンポジットレイヤー ]タブでは、レイヤーツリーが自動的に展開され、レイヤーツリーの下の [詳細 ]タブに選択したレイヤーに関する情報が表示されます。
![[コンポジット レイヤー] タブ](index-images/composited-layers-tab.png)
低速スクロールの四角形 (チェック ボックス)
[ 低速スクロール矩形] チェック ボックスは、スクロールが遅くなる原因となるページのセクションを強調表示します。 このチェック ボックスは、パフォーマンスの問題を調べる場合に役立ちます。 一部の Web ページでは、JavaScript を使用して特定のページ要素のスクロール (またはタッチ) を検出し、この方法によって Web ページのスクロールが通常より遅くなる場合があります。
このチェック ボックスは、これらのパフォーマンスの問題の原因となる可能性がある、レンダリングされた Web ページのボックスを (ピンク色で) 強調表示します。
このチェック ボックスは、レンダリング ツールの [スクロール パフォーマンスの問題] チェック ボックスに似ています。ページ上の遅い四角形が (黄色で) 直接強調表示されます。 パフォーマンス機能リファレンスの「スクロール パフォーマンスの問題をリアルタイムで見つける」を参照してください。 どちらのチェックボックスも同じデバッグ情報に基づいていますが、これら 2 つのツールではこの情報の表示方法が異なります。
ペイント (チェック ボックス)
Web ページのコンテンツ (カラーまたは画像ファイル) を要素にレンダリングします。
レイヤー エキスパンダー ツリー
このツリーを展開すると、複合レイヤーのリストが表示されます。 レイヤーをクリックすると、[ 詳細 情報] ウィンドウにそのレイヤーに関する詳細情報が表示されます。
詳細 (情報ペイン)
[コンポジット レイヤー] ウィンドウの下にある [詳細情報] ウィンドウには、次のフィールドがあります。
Size
選択したコンポジットレイヤーの幅と高さ、およびページビューポートの左上に対するレイヤーの左上の位置。 たとえば、"1034 x 28055 (at 0, 0)" などです。
合成する理由
ブラウザー レンダリング エンジンがレイヤーを作成した理由。 例: "スクロールできるコンテンツを格納する第 2 レイヤー。"
メモリの推定
選択したレイヤーに使用されるメモリ。 例: "116 MB"。
ペイント数
選択したレイヤーがレンダリング エンジンによってペイントされた回数。
[Z インデックス] タブ
[Z インデックス] タブには、コンテキストをスタックしている要素、または z 軸に沿って配置されている Web ページの要素のみが表示されます。
![[Z インデックス] タブ](index-images/z-index-tab.png)
詳細については、 コンテキストのスタッキングと MDN での z-index の使用 を参照してください。
要素の表示の種類 (セクション)
[Z インデックス] タブの [要素の表示の種類] セクションでは、ページのどの要素を 3D キャンバスに表示するかを制御します。
[ すべて表示 ] ラジオ ボタンは、スタック コンテキスト要素と z 軸上に配置された要素の両方を表示します。 このビューは、z 軸に正しく配置されていない要素の問題をデバッグする場合に便利です。
[スタック コンテキストのみを表示] ラジオ ボタンには、スタック コンテキストであるページ要素のみが表示されます。 このビューは、Web ページ上のコンテキストをスタックしている要素をすばやく調べるのに役立ちます。
[ Z インデックス ラベルを表示する] チェック ボックスは、3D キャンバスの z-index ラベルの表示と非表示を切り替えます。 既定では、このチェック ボックスはオンになっています。
色の種類 (セクション)
[Z インデックス] タブでは、次の配色から選択して、3D キャンバスで DOM を視覚化できます。
[紫から白] ラジオ ボタン - 3D キャンバスには、紫から白までの要素が表示されます。
[背景色を使用する] ラジオ ボタン - 3D キャンバスには、各要素に対して定義されている背景色を使用してレンダリングされた要素が表示されます。
これらのラジオ ボタンを使用すると、オプションを切り替えたり、色の種類を選択したりできます。 色の種類は、プロジェクトに最も適しているか、最も気に入っているものです。 Z インデックス ラベルは 3D キャンバスに視覚情報を追加するため、ユーザー フィードバックに従って、[DOM] タブよりも [Z インデックス] タブの色オプションが少なくなります。
[DOM] タブ
[ DOM] タブには、DOM ツリーの一般的なデバッグ ビューが表示されます。 [ DOM] タブには、Web ページのすべての要素が 3D キャンバスに表示されます。
![[DOM] タブ](index-images/dom-tab.png)
3D キャンバス上の要素の X 座標と Y 座標が、Web ページ上の要素の座標と一致している。 要素の Z 座標は、DOM ツリー内で要素がどれだけ深く入れ子になっているかに基づきます。
ページの入れ子レベル (スライダー)
スライダーは、3D キャンバスに表示する DOM ツリーのレベルの数を制御します。 スライダーの横に表示される値は、3D キャンバスに表示される要素の最大深度を示します。 スライダーを左にドラッグすると、入れ子レベルが 1 に設定されたままになるまで、最も外側のレイヤーが剥がれ、DOM の最も後ろの要素のみが表示されます。 すっきり取り除くには、スライダーをドラッグして、下位レベルで何が起こっているかを詳しく確認します。
リセット ボタン
ページ スライダー の入れ子レベル をページの既定値にリセットします。
色の種類 (セクション)
[ DOM] タブでは、次の配色から選択して、DOM を 3D キャンバスで視覚化できます:
[紫から白] ラジオ ボタン - 3D キャンバスには、紫から白までの要素が表示されます。
[青から黄色] ラジオ ボタン - 3D キャンバスには、青から黄色の範囲の要素が表示されます。
虹ラジオ ボタン - 3D キャンバスには、要素が紫、青、緑、黄、オレンジ、赤として表示されます。
[画面テクスチャを使用] ラジオ ボタン - Web ページのコンテンツ (カラーまたは画像ファイル) を要素にレンダリングします。
[背景色を使用する] ラジオ ボタン - 3D キャンバスには、各要素に対して定義されている背景色を使用してレンダリングされた要素が表示されます。
3D キャンバスの上にあるツール バー
スナップショットの撮り直し (ボタン)
[DOM] タブまたは [Z インデックス] タブの [再撮りスナップショット] ([再![撮りスナップショット] アイコン](index-images/retake-snapshot-icon.png){kind=icon}
) ボタンをクリックして、DOM ツリーまたはスタッキング コンテキスト ツリーの 3D 表現を最新の Web ページ ビューポートに一致するように更新します。 たとえば、ビューポートを狭くした後や、 モバイル デバイスのエミュレート (デバイス エミュレーション) ごとに、デバイス エミュレーション ビューに切り替えた場合などです。
[コンポジット レイヤー]タブが選択されている場合、ビューポートのサイズを変更すると、スナップショットの再取得が自動的に行われるため、このボタンは省略されます。
ビューのリセット (ボタン)
[ ビューのリセット ] ボタン (![[ビューのリセット] アイコン](index-images/reset-view-icon.png){kind=icon}
) をクリックして、ページのパンと回転をリセットします。
パン ビュー (ボタン)
ページを左、右、上、または下にシフトするには、[ パン ビュー ] ) ボタンをクリックし、マウスで 3D キャンバス上のページを目的の方向にドラッグします。
回転ビュー (ボタン)
マウスを使用してページを回転するには、[ 回転ビュー ] () ボタンをクリックし、マウスを使用して 3D キャンバス上のページを希望の角度にドラッグします。
キーボードを使用してページを回転するには、3D キャンバス内をクリックしてフォーカスを置き、黒い枠線が表示されるようにしてから、方向キーを押します。
- ページを水平方向に回転するには、 左方向 キーまたは 右方向 キーを押します。
- ページを垂直方向に回転するには、 上方向 キーまたは 下方向 キーを押します。
ツールバーで [ パン ビュー ] ボタンまたは [ ビューの回転 ] ボタンのどちらが選択されているかに関係なく、キーを押すとページが回転します。
選択した要素を分離する (ボタンとセクション)
ページのすべての DOM 要素を 3D キャンバスに表示する代わりに、DOM の一部のみを表示することに集中できます。
3D キャンバスで Web ページの要素を選択し、[ 選択した要素を分離] ボタンをクリックします。 3D キャンバスには、選択した要素とその要素の親または子が表示され、残りのページ要素は表示されません。
このボタンを使用して、3D キャンバス上で選択した要素を表示し、複雑な Web ページが 3D キャンバスに作成する可能性のある雑然とした要素を減らします。
親を含める (チェック ボックス)
[ 親を含める] チェックボックスは、選択したページ要素の親要素を 3D キャンバスに表示するかどうかを制御します。 [ 親を含める] チェック ボックスは既定でオンになっています。 このチェック ボックスをオンにすると、要素とその親要素を 3D キャンバス上に表示するには、3D キャンバスまたは [要素 ] ツールで要素を選択し、[ 選択した要素を分離 ] ボタンをクリックします。
このチェックボックスは、[ Z インデックス ] タブまたは [DOM] タブが選択されているときに表示されます。
子供を含める (チェック ボックス)
[ 子を含める ] チェックボックスは、[ DOM] タブが選択されている場合にのみ表示されます。
選択した DOM 要素とその要素の親子のみを表示するには、次のようにします。
- [ 親を含める] チェック ボックスと [子を含める] チェック ボックスをオンにし、[ 選択した要素を分離する] ボタンをクリックします。 これが既定値です。
選択した DOM 要素とその要素の親要素のみを表示し、要素の子要素は表示しない場合:
- [ 親を含める] チェック ボックスをオンにし、[ 子を含める] チェック ボックスをオフにして、[ 選択した要素を分離する] ボタンをクリックします。
選択した DOM 要素のみを要素の子要素と共に表示し、要素の親要素は表示しない場合:
- [ 親を含める] チェック ボックスをオフにし、[ 子を含める] チェック ボックスをオンにして、[ 選択した要素を分離する] ボタンをクリックします。
親要素または子要素を指定せずに、選択した DOM 要素のみを表示するには:
- [親を含める] チェック ボックスをオフにし、[選択した要素を分離する] ボタンをクリックします。
右下の移動コントロール
3D キャンバスの右下にあるコントロールは、どちらのタブを選択しても同じように動作します。
ズーム スライダー - マウスのスクロール ホイールやタッチパッド上で 2 本の指をドラッグする方法と同じように、ページを拡大または縮小します。
上ボタン - ページの座標系を基準にしてページを上に移動します。
下ボタン - ページの座標系を基準にしてページを下に移動します。
左ボタン - ページの座標系を基準にしてページを右に移動します。
右ボタン - ページの座標系を基準にしてページを左に移動します。