Microsoft Edge DevTools の試験的機能

  • [アーティクル]

Microsoft Edge DevTools は、まだ開発中の試験的な機能にアクセスできます。 この記事では、次のいずれかの試験的な機能の一覧と説明を行います。

  • Microsoft Edge の Canary プレビュー チャネルの最新バージョン。
  • Microsoft Edge の安定版リリースの最新バージョン。

Microsoft Edge のすべてのチャネルには、試験的な機能があります。 Microsoft Edge Canary チャネルを使用して、最新の試験的な機能を取得できます。 Microsoft Edge のバージョンで使用できる実験の完全な一覧を表示するには、DevTools の [設定の実験] > ページを参照してください。

これらの実験は不安定または信頼性が低く、DevTools の再起動が必要になる場合があります。

既定でオンになっている実験

次の試験的な機能は、既定でオンになっています。 これらの機能は、設定を変更せずにすぐに使用できます。 必要に応じて、これらの既定の試験的機能をオフにすることができます。

Microsoft Edge Canary 131 で既定でオンになっています。

Microsoft Edge Stable 129 で既定でオンになっています。

実験のオンとオフを切り替える

試験的な機能は常に更新され、パフォーマンスの問題を引き起こす可能性があります。 これは、実験をオフにしたい理由の 1 つです。

Microsoft Edge で実験を有効または無効にするには:

  1. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. DevTools のメイン ツール バーで、[DevTools のカスタマイズと制御 (DevTools アイコンのカスタマイズと制御)] ボタンをクリックし、[設定 (設定アイコン)] ボタンをクリックします。 または、 Shift キーを押しながら?キーを押します。

  3. [設定] パネルの左側で、[実験] ページを選択します。

    [設定] の [実験] ページ

  4. 実験のチェック ボックスをオンまたはオフにします。 既定では、一部の実験が選択されています。

  5. DevTools 設定の右上にある [ 閉じる ] ([DevTools > 設定] の [閉じる] アイコン) をクリック します。

  6. [ DevTools の再読み込み ] ボタンをクリックします。

実験が選択されている既定値の復元

試験的な機能がオンになっている既定の設定を復元するには:

  1. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. DevTools のメイン ツール バーで、[設定] ([設定] アイコン) ボタンをクリックします。 または、 Shift キーを押しながら?キーを押します。 [設定] パネルが開き、[基本設定] ページが選択されています。

  3. [基本設定] ページの下部にある [既定値と更新の復元] ボタンをクリックし、[閉じる] (DevTools > の [設定] の [閉じる] アイコン) をクリックします。

実験のフィルター処理

試験的な機能は、タイトルに含まれるテキストでフィルター処理できます。

  1. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. DevTools のメイン ツール バーで、[設定] ([設定] アイコン) ボタンをクリックします。 または、 Shift キーを押しながら?キーを押します。 [設定] パネルが開き、[基本設定] ページが選択されています。

  3. [設定] パネルの左側にある [実験] ページを選択します。

  4. [フィルター] テキスト ボックスをクリックし、タイムラインなどのテキストを入力します。 入力すると、一致するチェック ボックスのみが [実験 ] ページに表示されます。

  5. フィルター処理を終了するには、[ フィルター ] テキスト ボックスをオフにします。

実験に関するフィードバックの提供

試験的な機能に関するフィードバックをお寄せください。 Microsoft とフィードバックを共有するには、 Microsoft Edge DevTools チームにお問い合わせください。

実験の一覧

Microsoft Edge の Canary プレビュー チャネルの最新バージョンに表示される実験チェック ボックスを次に示します。 Canary のチェックボックスの追加または削除の背後に続いて、安定したリリースも確認できます。

拡張機能によるカスタム スタイルシートの読み込みを許可する

一部の Microsoft Edge アドオンでは、DevTools のカスタム カラー テーマを定義できます。 DevTools のカスタム カラー テーマを定義するアドオンをインストールする場合は、 拡張機能がカスタム スタイルシートの読み込みを許可 する実験を有効にしてアドオン テーマを表示する必要があります。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

ノード作成スタックをキャプチャする

実行時に DOM ノードが DOM に追加されたときに JavaScript スタック トレースをキャプチャするには、この実験を有効にします。 この実験では、[要素] ツールの [スタック トレース] タブを [スタイル] タブでグループ化して追加します。

[要素] ツールの [スタック トレース] タブ

実験を有効にした後、次のようにテストできます。

  1. 新しいウィンドウまたはタブで、 TODO デモ アプリなど、JavaScript を使用して DOM ノードを動的に作成する Web ページを開きます。
  2. レンダリングされたデモ ページで、新しい todo 項目を作成します。
  3. レンダリングされたデモ ページで、新しい todo 項目を右クリックし、[ 検査] を選択します。 DevTools が開き、 要素 ツールが表示されます。
  4. [ スタック トレース ] タブをクリックします。これは [ スタイル ] タブでグループ化されます。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

プロトコル モニター

DevTools でプロトコル モニター ツールを使用できるようにします。

プロトコル モニター ツールは、DevTools によって送受信されたメッセージを表示して、検査されたページをデバッグします。 DevTools は、Chrome DevTools Protocol (CDP) を使用して検査されたページと通信します。

このチェック ボックスをオンにし、 プロトコル モニター ツールを開くには:

  1. 上記の「実験のオンとオフを切り替える」の説明に従って、この [プロトコル モニター] チェック ボックスをオンにします。

  2. DevTools の下部にある クイック ビュー で、[ その他のツール (+)] ボタンをクリックし、[ プロトコル モニター] を選択します。

    または、Ctrl + Shift + P (Windows/Linux) または Command + Shift + P (macOS) を押すなどのコマンド メニューを開き、テキスト ボックスに「protocol」と入力します。 次に、[ Show Protocol monitor]\(プロトコル モニターの表示\) を選択します。

    プロトコル モニター ツールは、DevTools の下部にある [クイック ビュー] パネルに表示されます。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

ヒープ スナップショットで内部を公開するオプションを表示する

Microsoft Edge 105 の時点での新規

メモリ ツールでヒープ スナップショット内の内部を公開するチェック ボックスを表示するかどうかを指定します。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

インデント マーカーを一時的に無効にする

Microsoft Edge 122 の時点での新規

ソース ツールでインデント マーカーを一時的に無効にします。 インデント マーカーは、コードのインデント レベルを示す垂直線です。

インデント マーカーを示す [ソース] ツール

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

以前のコントラスト比と AA/AAA ガイドラインを置き換えて、新しい高度な知覚コントラスト アルゴリズム (APCA) を有効にする

高度な知覚コントラスト アルゴリズム (APCA) は、カラー ピッカー の AA/AAA ガイドラインのコントラスト比を置き換えます。 カラー ピッカーは、[要素] ツールの [スタイル] タブで使用します。

APCA は、コントラストを計算する新しい方法です。 これは、色覚に関する最新の研究に基づいています。 AA/AAA ガイドラインと比較すると、APCA はコンテキストに依存します。 コントラストは、テキスト、色、コンテキストの次の空間プロパティに基づいて計算されます。

  • フォントの太さとサイズが含まれるテキストの空間プロパティ。
  • テキストと背景間で認識されているコントラストが含まれる色彩空間プロパティ。
  • 環境光、周囲、および目的の意図が含まれるコンテキスト空間プロパティ。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

[要素] パネルで完全なアクセシビリティ ツリー ビューを有効にする

要素ツールで DOM ツリーとアクセシビリティ ツリーを切り替える [アクセシビリティ ツリーに切り替え] ボタンを追加します。 ボタン ラベルが [ DOM ツリー ビューに切り替え] に切り替わります。

この [実験] チェック ボックスをオフにすると、[ 要素 ] ツールにボタンがありません。

[アクセシビリティ ツリー ビューに切り替える] ボタンのない要素ツール

この [実験] チェック ボックスがオンの場合、[ 要素 ] ツールには次のボタンがあります。

[アクセシビリティ ツリー ビューに切り替える] ボタンを含む要素ツール

要素ツールのアクセシビリティ ツリー ビュー:

要素ツールのアクセシビリティ ツリー ビュー

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

スタイル ウィンドウ内で新しいフォント エディターを有効にする

ビジュアルフォントエディターを使用してフォントを編集できます。 フォントとフォントの特性を定義します。 visual Font エディターは、次の操作を行うのに役立ちます。

  • 異なるフォント プロパティの単位を切り替える
  • 異なるフォント プロパティのキーワードを切り替える
  • 単位を変換
  • 正確な CSS コードを生成

Visual Font エディターを使用するには:

  1. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. DevTools のメイン ツール バーで、[要素] タブを選択します。[要素] タブが表示されない場合は、[その他のタブ ] ([その他のタブ] アイコン) ボタンをクリックするか、[その他のツール] ([その他のツール] アイコン) ボタンをクリックします。

  3. [スタイル] タブで、[フォント エディター] アイコンを選択します。

    ビジュアルの [フォント エディター] ウィンドウが強調表示されています

一部のブラウザー チャネルには、[スタイル] ウィンドウ内の [新しいフォント エディター ツールを有効にする] チェック ボックスがオンになっています。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

[問題] パネルを使用して自動コントラストの問題レポートを有効にする

Issue ツールで 自動コントラスト問題レポートを有効にします。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

実験的な Cookie 機能を有効にします。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

[スタイル] タブの CSS <長> さの作成ツールを非推奨に

Microsoft Edge には適用されません。 このチェック ボックスをオンまたはオフにしても効果はありません。

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

[スタイル] タブで CSS の変更を同期する

[要素] ツールの [スタイル] タブで CSS の変更を同期するかどうか。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

[要素] パネル DOM ツリーで違反しているノードまたは属性を強調表示します

Microsoft Edge 106 の時点での新規

要素ツールの DOM ツリーで違反しているノードまたは属性を強調表示します。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

作成されたツリーとデプロイされたツリーにソースをグループ化する

Microsoft Edge 104 の時点での新規

ソース ツールの [ページ] タブで、リソースを個別の Authored ツリーと Deployed ツリーにグループ化するかどうかを制御します。 ソース ツールのこの機能を使用すると、ソース ファイルを次の内容に応じて 2 つのフォルダーにグループ化できます。

  • 元のソース ファイル (作成済み、つまり、ローカル編集を含むファイル)。
  • 運用ファイル (ソース ファイルのコンパイルとバンドル後に Web サーバー上に配置されたファイル)。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

ソース ツリー ビューで一覧表示されていないコードを非表示にする

Microsoft Edge 106 の時点での新規

[ソース] ツールのツリー ビューで、[無視] リストに含まれるコードを省略します。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

[プロパティ] タブで重要な DOM プロパティを強調表示する

Microsoft Edge 105 の時点での新規

このチェック ボックスをオンにすると、現在選択されている DOM ツリー要素の [要素] ツールなどのツールの [プロパティ] タブで重要な DOM プロパティが強調表示されます。 この新しい実験により、主要なプロパティが見やすくなります。 一部のプロパティは太字で表示され、他のプロパティは太字で表示され、その横にstarアイコンがあります。

この強調表示は、JavaScript ではオブジェクトが親オブジェクトから継承され、それ自体が他の先祖から継承され、場合によっては数百のプロパティが継承されるため、便利です。 この実験は、メインプロパティを見つけるのに役立ちます。

オブジェクト プロパティ ビューアーは、 要素、 ソース、 コンソール、ネットワークなど、いくつかのツール に含まれています。 オブジェクトのプロパティのツリー ビューを提供します。

[要素] ツールで

[要素] ツールで [オブジェクトのプロパティ] ビューアーを表示するには:

  1. Web ページ内の項目を右クリックし、[ 検査] を選択します。 DevTools が開き、 要素 ツールの DOM ツリーで page 要素が選択されています。

  2. [要素] ツールで、[プロパティ] タブを選択し、[スタイル] タブでグループ化します。

    [ プロパティ ] タブには、選択した要素のプロパティの一覧が表示されます。

関連項目:

[ソース] ツールで

[ソース] ツールで [オブジェクトのプロパティ] ビューアーを表示するには:

  1. ファイルを .js 開きます。

  2. ファイル内のコード行にブレークポイントを .js 設定します。

  3. Web ページでコードを実行して、その行でデバッガーを一時停止します。

    オブジェクトのプロパティは、右側のサイドバーの [スコープ ] セクションに表示されます。 JavaScript デバッグ機能でのプロパティと変数の表示と編集に関するページを参照してください。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 には存在しません。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

バックグラウンド ページ セレクターを有効にする (プリレンダリング用)

Microsoft Edge 114 の時点での新しい、Microsoft Edge 128 の時点でのチェック ボックスの新しいラベル

デバッグのプリレンダリングなど、バックグラウンド ページ セレクターを有効にします。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 には存在しません。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

ネットワーク パネルのフィルター バーの再設計

Microsoft Edge 120 の時点での新規

ネットワーク ツールで、フィルター バーが再設計されました。

  • ボタンは、[ 要求の種類 ] ドロップダウン リストに置き換えられます。
  • チェック ボックスは、[ その他のフィルター] ドロップダウン リストに置き換えられます。

このチェック ボックスがオフのフィルター バー:

このチェック ボックスがオフのフィルター バー

このチェック ボックスがオンのフィルター バー:

このチェック ボックスがオンのフィルター バー

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

オートフィル パネル

Microsoft Edge 125 の時点での新規

ユーザーがブラウザーの オートフィル 機能を使用してフォームに入力するときにブラウザーによってトリガーされるさまざまなイベントを記録するために、自動入力ツールを DevTools に追加します。 たとえば、ブラウザーがアドレスを記憶し、アドレス フィールドに自動入力する場合などです。

オートフィル ツール

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 123 に [ オートフィルを有効にする] ビューとして表示されます。

パフォーマンス パネル: postMessage ディスパッチフローと処理フローを表示する

Microsoft Edge 124 の時点での新規

この実験では、パフォーマンス ツールの Main セクションが改善され、メソッドによってpostMessageトリガーされるイベントとパフォーマンス ツールに表示される他のイベントを区別することで、イベントとハンドラーをすばやく識別postMessageできます。 この実験は、アプリケーションのさまざまなスレッド間でのメッセージの投稿に関連するパフォーマンスの問題を調査し、ウィンドウ、iframe、および専用ワーカー間のメッセージを表示するのに役立ちます。

この実験がないと、アプリケーションのスレッド間でメッセージをディスパッチして処理することによってトリガーされるイベントは、汎用スクリプト関数呼び出しイベントとして表示されます。 この実験を有効にした場合:

  • postMessage ディスパッチ イベントは 、postMessage のスケジュールとして表示されます。
  • postMessage ハンドラー イベントは 、On Message として表示されます。

パフォーマンス ツールの

この実験は、呼び出しが postMessage いつ発生したか、およびハンドラーが開始されるまでにメッセージがキューに入れられていた時間を postMessage 調査するのに役立ちます。 ディスパッチ イベントは、いずれかの種類のイベントをクリックしたときに表示されるイニシエーター矢印によってハンドラー イベントにリンクされます。

ディスパッチ イベントをハンドラー イベントにリンクする矢印

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: ライブ メトリックのランディング ページを有効にする

Microsoft Edge 127 の時点での新規

パフォーマンス ツールで、パフォーマンス トレースがまだ記録されていないときに表示されるランディング ページを追加します。 ランディング ページには、次のようなライブ更新されたレンダリングされたページに関するパフォーマンス メトリックが表示されます。

  • 最大のコンテンツフル ペイント (LCP)
  • 累積レイアウトシフト (CLS)
  • 次のペイントへの相互作用 (INP)

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: タイムラインでサーバーのタイミングを有効にする

Microsoft Edge Stable 129 の時点で新しい

パフォーマンス ツールの [メイン] セクションに [サーバーのタイミング] トラックを表示し、HTTP サーバーから送信されたサーバー タイミング イベントを表示します。 詳細については、「MDN Web Docs での サーバーのタイミング 」を参照してください。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

DevTools のキャッチされない例外をコンソールに記録する

コンソール ツールで DevTools のキャッチされない例外をログに記録するかどうかを制御 します 。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

Enable webhint

webhintはオープン ソース ツールであり、Web サイトとローカル Web ページに対してリアルタイムでのフィードバックを提供します。 Webhint によって提供されるフィードバックの種類には、次のものが含まれます。

  • アクセシビリティ
  • ブラウザー間の互換性
  • セキュリティ
  • パフォーマンス
  • プログレッシブ Web Apps (PWA)
  • その他の一般的な Web 開発の問題

Webhint 実験では、イシュー ツールに Webhint フィードバックが表示されます。 問題を選択して、ソリューションに関するドキュメントと、Web サイトの影響を受けるリソースの一覧を表示します。 リソース リンクを選択して、ネットワーク、ソース、要素などの関連ツールを開きます。

イシュー ツールでの webhint フィードバック

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

要素に問題を表示する

要素ツールの DOM ノードの下に、構文エラーを波線で表示します。

関連項目:

  • Wavy の下線は 、 DevTools (Microsoft Edge 91) の新機能の要素ツールのコードの問題と機能強化を強調しています。

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

Visual Studio Code でソース ファイルを開く

Visual Studio Code のオープン ソース ファイル実験では、ローカル ファイルを編集するために、ソース ツールのコード エディターが Visual Studio Code に置き換えられます。 この実験を有効にすると、ローカル ファイルを編集するときに開発者ツールによって検出され、ワークスペースとして使用するフォルダーを選択するように求められます。

ワークスペースとして使用するフォルダーを選択すると、DevTools でファイルへのリンクを選択すると、Visual Studio Code でファイルが開きます。 以前のバージョンの Microsoft Edge では、このアクションにより、DevTools の Sources ツールのコード エディターでファイルが開かれました。

スタイル ツールでファイル リンクを選択すると、Visual Studio Code でファイルが開きます

DevTools で行った編集によって、ハード ドライブ上のファイルが変更され、Visual Studio Code とライブ同期されるようになりました。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

アダプティブ CPU 調整を有効にする

Microsoft Edge 114 の時点で新しい

アダプティブ CPU 調整を有効にします。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

CSS Copilot を有効にする

Microsoft Edge サイドバーで Copilot を使用して HTML 要素と CSS スタイルを説明し、 要素ツールに 表示される特定の要素またはスタイル ルールをよりよく理解できるようにします。 要素またはスタイルルールについて Copilot に質問するには、その横にある [Copilot ] ボタンをクリックし、フォローアップの質問をします。

要素ツールの Copilot アイコン

この実験は、サイドバーがオフになっている場合は使用できません。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

ライブ ヒープ プロファイル

ヒープ プロファイルをライブ更新するかどうかを制御します。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

サンプリング ヒープ プロファイラーのタイムライン

パフォーマンス ツールでサンプリング ヒープ プロファイラーのタイムラインを表示するかどうかを制御します。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: 無効化の追跡

パフォーマンス ツールの [概要] タブで、[スタイルの再計算] イベントの [無効化] セクションを追加します。 [ Invalidations] \(無効化\) セクションでは、 パフォーマンス の問題を引き起こしている実行時間の長い 再計算スタイル イベントを調査するときに役立つ可能性がある、スタイルの再計算イベントの根本原因に関する情報を提供します。

[ Invalidations] \(無効化\) セクションには、WEB ページの変更の結果として無効化された DOM ノード (DOM の変更など) と、ブラウザー エンジンが [スタイルの再計算 ] イベント中にスタイルを変更する必要があった DOM ノードが一覧表示されます。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: すべてのイベントを表示する

パフォーマンス ツールですべてのイベントを表示するかどうかを制御します。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: V8 ランタイム呼び出し統計

パフォーマンス ツールで V8 ランタイム呼び出しの統計情報を表示するかどうかを制御します。 V8 は、Microsoft Edge で使用される JavaScript エンジンです。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: 拡張トレースの収集を有効にする

Microsoft Edge 128 の時点での新規

この実験では、 パフォーマンス ツールで新しく追加されたトレースをキャプチャし、拡張トレース v2 をサポートします。 この機能は、アップストリーム Chromium プロジェクトで実装されています。 この実験は、強化されたトレースをキャプチャする Microsoft Edge の機能には影響せず、DevTools ユーザーのエクスペリエンスには影響しません。

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

関連項目:

パフォーマンス パネル: コンパイル済みスクリプトのソース テキストの収集を有効にする

Microsoft Edge 128 の時点での新規

パフォーマンス ツールでは、トレース ファイルをエクスポートするときに、コンパイルされたスクリプトのソース コードをトレース ファイルに格納します。

この実験では、 トレース 内のパフォーマンス ツール レコード スクリプトのソース テキストを作成します。 この機能は、アップストリーム Chromium プロジェクトで実装されています。

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

関連項目:

パフォーマンス パネル: デバッグ モードを有効にする (トレース イベントの詳細など)

Microsoft Edge 128 の時点での新規

パフォーマンス ツールの [概要] タブに [トレース イベント] セクションを追加します。 [トレース イベント] セクションは、記録されたパフォーマンス トレースでイベントを選択すると表示されます。 [ トレース イベント] セクションには、選択したトレース イベントに関するデバッグ情報 (名前や期間など) が表示されます。

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

関連項目:

インストルメンテーション ブレークポイントを有効にする

テスト ブレークポイントで停止するかどうか。 この実験により、ブレークポイントの信頼性が高くなります。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

ソース マップからのスコープ情報を使用する

Microsoft Edge 118 の時点での新規

ソース マップからスコープ情報を使用するかどうか。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

アプリケーション パネルで投機的な読み込みパネルを有効にする

Microsoft Edge 121 の時点での新規

[ルール] ページと [投機] ページなど、アプリケーション ツールの [バックグラウンド サービス] セクション内に投機的読み込みページを追加します。

アプリケーション ツール内の投機的読み込みページ

投機ルール API を使用すると、プログラムによって特定のページを事前にレンダリングするように Microsoft Edge に指示できます。 これは、事前にレンダリングされたページの移動がほぼ瞬時に行われるため、便利です。 ブラウザーは非表示の方法で、ユーザーが移動する可能性が高い次のページを事前にレンダリングしますが、ユーザーは現在のページに残っています。

[投機的読み込み] ページには、Web 作成者が Web ページで定義した投機ルールが一覧表示されます。 ページには、特定のページが事前にレンダリングされたかどうかを示す、ルールが実際に使用されたかどうかを示すデバッグ情報が表示されます。

[ ルール] ページには、次の列があります。

  • ルール セット
  • 状態

[ 投機] ページには、次の列があります。

  • URL
  • 操作
  • ルール セット
  • 状態

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 には存在しません。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: 注釈を有効にする

Microsoft Edge Canary 129 の時点での新規

パフォーマンス ツールで注釈を有効にします。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: パフォーマンス分析情報を有効にする

Microsoft Edge Stable 129 の時点で新しい

パフォーマンス ツールで、記録されたパフォーマンス プロファイルを表示するときに、[分析情報] サイドバー タブを追加します。 [分析情報] サイドバー タブには、さまざまな [最大コンテンツフル ペイント] フェーズや [レンダリング ブロック要求] の一覧など、プロファイルに関する有用な情報が表示されます。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 に存在します。

パフォーマンス パネル: レイアウト シフト イベントの新しい概要詳細ビューを有効にする

Microsoft Edge Canary 131 の時点での新規

記録されたプロファイルを表示するときに、パフォーマンス ツールの [メイン] セクションに [レイアウトシフト] トラックを表示します。 レイアウトシフトトラックには、レイアウトシフトがいつ発生し、どの要素がシフトされるかに関する情報が表示されます。 予期しないレイアウトシフトは、Web ページのユーザー エクスペリエンスに悪影響を与える可能性があります。

関連項目:

状態:

  • このチェック ボックスは、Microsoft Edge Canary 131 に存在します。
  • このチェック ボックスは、Microsoft Edge Stable 129 には存在しません。