Microsoft Edge DevTools の試験的機能

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

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

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

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

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

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

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

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

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

試験的な機能は常に更新され、パフォーマンスの問題を引き起こす可能性があります。 これは、実験をオフにしたい理由の 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 のカスタム カラー テーマを定義できます。 テーマを含むアドオンをインストールする場合は、アドオンテーマを表示 するために、カスタム スタイルシートの読み込みを許可 する実験を有効にする必要があります。

状態:

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

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

実行時に DOM ノードが DOM に追加されたときに JavaScript スタック トレースをキャプチャするには、この実験を有効にします。 キャプチャされたスタック トレースは、[要素] パネルの [スタック トレース] ペインに表示されます。

状態:

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

縮小されたソースを自動的にきれいな印刷

この実験を有効にすると、[ソース] パネルに縮小されたファイルを表示すると、[ソース] パネルの 1 つのタブでファイルが開き、かなり印刷されます。

この実験をオフにすると、ボタンが表示された UI プロンプトで、ファイルをプリプリ印刷するかどうかを確認するメッセージが表示されます。 ファイルは、追加のタブで開かれます。追加のサフィックスは :formatted です

  • 縮小されたファイルは、1 つの長い行に連結されます。
  • 対照的に、 きれいな印刷 では、インデントされた人間が判読できる形式でファイルの内容が表示されます。

状態:

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

プロトコル モニター

DevTools は、DevTools プロトコルを使用して検査されたページと通信します。

DevTools によって送受信されたメッセージを監視して、検査されたページをデバッグするには:

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

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

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

  4. [ プロトコル モニター ] チェック ボックスをオンにし、[ 閉じる ] (DevTools > の [設定] の [閉じる] アイコン) をクリックして 設定を閉じます。

  5. Ctrl + Shift + P (Windows/Linux) または Command + Shift + P (macOS) を押すなどしてコマンド メニューを開き、テキスト ボックスに「protocol」と入力します。

  6. [ Show Protocol monitor]\(プロトコル モニターの表示\) を選択します。 "1 つ以上の設定が変更されました。これを有効にするには再読み込みが必要です" というメッセージが表示されます。

  7. メッセージの横に表示される [ DevTools の再読み込み ] ボタンをクリックします。

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

状態:

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

[CSP 違反の表示] ビュー

CSP 違反ツールを追加します。これにより、検査された Web ページで検出されたすべてのコンテンツ セキュリティ ポリシー (CSP) 違反が表示されます。

CSP 違反ツール

状態:

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

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

Microsoft Edge 105 の時点での新規

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

関連項目:

状態:

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

ソース注文ビューアー

このチェック ボックスは削除されています。 ソース 注文ビューアーは、実験ではなく通常の機能になりました。 チェック ボックスをオンにするかオフにしても、違いはありません。ソース 注文ビューアー機能は、DevTools にどちらの方法でも表示されます。

関連項目:

状態:

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

タイムライン: イベント イニシエーター

タイムラインにイベント イニシエーターを含めるかどうか。

状態:

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

JavaScript Profiler を一時的に有効にする

Microsoft Edge 114 の時点で新しい

DevTools で JavaScript Profiler ツール (タブ) を一時的に有効にします。 JavaScript Profiler ツールは非推奨になります。 JavaScript CPU プロファイルを記録するには、代わりに パフォーマンス ツールを使用します。

関連項目:

状態:

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

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

Microsoft Edge 122 の時点での新規

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

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

状態:

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

WebAssembly デバッグ: DWARF サポートを有効にする

WebAssembly デバッグの DWARF サポートを有効にします。 「DevTools の新機能 (Microsoft Edge 80)」「WebAssembly デバッグの改善」を参照してください。

状態:

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

ソース マップを使用して式の変数名を解決する

ソース マップを使用して、式を評価するときに、元の変数名を縮小された変数名に自動的にマップします。

このチェック ボックスは、[ コンソール] と [ソース] ツールの [ ウォッチ ] サイドバー タブに影響 します

関連項目:

状態:

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

起動時にすべてのブレークポイントを熱心に設定する

起動時に定義できるすべてのブレークポイントを設定します。

関連項目:

状態:

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

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

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

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

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

関連項目:

状態:

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

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

DOM ツリーとアクセシビリティ ツリーを切り替えるボタンを 要素 ツールに追加します。

状態:

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

[スタイル] ウィンドウで新しいフォント エディター ツールを有効にします。

以下 の「スタイル」ペインの「フォント エディター ツールを有効にする」を 参照してください。

[スタイル] ウィンドウでフォント エディター ツールを有効にする

ビジュアル フォント エディター を使用してフォントを編集できます。 フォントとフォントの特性を定義します。 ビジュアル フォント エディター を使用すると、次の操作を行うことができます。

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

ビジュアル フォント エディターを使用するには:

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

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

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

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

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

関連項目:

状態:

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

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

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

状態:

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

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

状態:

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

[変更] タブに、より正確な変更を表示する

[変更] タブの詳細な変更に関するページを参照してください。

状態:

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

[スタイル] ウィンドウで CSS の変更を同期する

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

状態:

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

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

Microsoft Edge 106 の時点での新規

状態:

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

応答ヘッダーのローカルオーバーライド

応答ヘッダーにローカルオーバーライドを使用するかどうか。

状態:

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

ブラウザー ウィンドウの外で色の選択を有効にする

マウス カーソルがスポイト ツールの場合は、Microsoft Edge ウィンドウ内だけでなく、画面上の任意の場所に移動できます。

[要素] ツールの [スタイル] タブで、任意の色プレビューをクリックします。 カラー ピッカーが開きます。 [ カラー ピッカーの切り替え ] (スポイト アイコン ボタン) ボタンをクリックします。 マウス カーソルがスポイトになります。 モニター上の任意の場所をクリックして色を選択します。

関連項目:

状態:

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

ソースを作成済みツリーとデプロイ済みツリーにグループ化する

Microsoft Edge 104 の時点での新規

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

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

状態:

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

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

Microsoft Edge 106 の時点での新規

状態:

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

オブジェクト プロパティ ビューアーで重要な DOM プロパティを強調表示する

Microsoft Edge 105 の時点での新規

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

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

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

[要素] ツールで

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

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

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

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

[ソース] ツールで

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

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

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

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

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

状態:

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

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

Microsoft Edge 114 の時点で新しい

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

関連項目:

状態:

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

コードを貼り付けるときに Self-XSS に関する警告を表示する

Microsoft Edge 117 の時点での新規

コードがコンソールに貼り付けられるとき、自己クロスサイト スクリプティングに関する警告を表示します。 このチェック ボックスをオンにすると、最初にコンソール ツールにコードを貼り付けようとすると、警告メッセージが表示されます。

"警告: 理解できないコードや、自分で確認していないコードを DevTools コンソールに貼り付けないでください。 これにより、攻撃者が ID を盗んだり、コンピューターを制御したりする可能性があります。 貼り付けを許可するには、以下に「貼り付け許可」と入力してください。

コンソールに入力 allow pasting した後、現在の DevTools セッションと今後のセッションでコードを貼り付けることができます。

関連項目:

状態:

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

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

Microsoft Edge 120 の時点での新規

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

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

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

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

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

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

関連項目:

状態:

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

パフォーマンス パネルで階層リンクを有効にする

Microsoft Edge 121 の時点での新規

アプリケーション ツールで記録の時間範囲を拡大する機能を追加します。 また、前の範囲に戻るタイミング階層リンク パスも追加します。

時間範囲を拡大するには:

  1. 時間範囲を作成するには、[ 概要 ] セクションでマウスをドラッグします。
  2. 選択した時間範囲にマウス ポインターを合わせ、ホバー時に表示される拡大鏡アイコンをクリックします。 タイミング階層リンク パスに新しい項目が追加されます。

以前の時間範囲に縮小するには、タイミング階層リンク パス内の項目をクリックします。

パフォーマンスの記録を示すアプリケーション ツール。上部にタイミング階層リンク パスがあり、選択した範囲にズーム アイコンが表示されます

関連項目:

状態:

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

オートフィル ビューを有効にする

Microsoft Edge 121 の時点での新規

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

オートフィル ツール

関連項目:

状態:

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

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

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

状態:

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

Enable webhint

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

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

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

[問題] パネル内の webhint のフィードバック

状態:

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

要素に問題を表示する

要素ツールのDOM ビューで HTML の構文エラーを表示するには、この実験を有効にします。 詳細については、「 Wavy の下線でコードの問題と要素ツールの機能強化を強調表示する」を参照してください。

状態:

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

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

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

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

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

DevTools で行った編集によって、ハード ドライブ上のファイルが変更され、Visual Studio Code とライブ同期されるようになりました。 ワークスペースの設定については、「 Visual Studio Code でソース ファイルを開く」を参照してください。

状態:

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

クラッシュ アナライザーを有効にする

Microsoft Edge 114 の時点で新しい

クラッシュ アナライザー ツールを有効にします。

関連項目:

状態:

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

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

Microsoft Edge 114 の時点で新しい

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

関連項目:

状態:

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

タイムライン上の JavaScript フレームのリストを無視する

JavaScript フレームの [無視] リストをタイムラインに含めるかどうか。

状態:

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

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

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

関連項目:

状態:

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

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

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

関連項目:

状態:

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

タイムライン: 無効化の追跡

タイムラインに無効化追跡を表示するかどうかを制御します。

状態:

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

タイムライン: すべてのイベントを表示する

タイムラインにすべてのイベントを表示するかどうかを制御します。

状態:

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

タイムライン: タイムライン上の V8 ランタイム呼び出し統計

タイムラインに v8 ランタイム呼び出し統計を表示するかどうかを制御します。

状態:

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

Node.js の [パフォーマンス] パネルで console.profile() の結果を表示する

Microsoft Edge 109 の時点で新しい

console.profile()Node.js のパフォーマンス ツールに結果を表示します。

console.profile() は、DevTools コンソール (またはコード内) で JavaScript プロファイルを開始するために使用でき、それを使用 console.profileEnd() して終了できます。 完了すると、 JavaScript Profiler ツールでプロファイルの記録を確認できます。

これは、JavaScript の実行を記録するプログラムによる方法であり、特定のパフォーマンス デバッグ状況で役立ちます。

DevTools を使用して Node.js で実行されているプロセスをデバッグする場合、この実験では、生成されたものはすべてconsole.profileパフォーマンス ツールで使用できるようになります。

状態:

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

関連項目:

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

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

関連項目:

状態:

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

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

Microsoft Edge 118 の時点での新規

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

関連項目:

状態:

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

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

Microsoft Edge 121 の時点での新規

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

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

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

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

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

  • ルール セット
  • 状態

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

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

状態:

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

アプリケーション パネルでストレージ バケット ツリーを有効にする

Microsoft Edge 118 の時点での新規

アプリケーション ツールでストレージ バケット ツリーを有効にするかどうか。

状態:

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

炎図のツリーを変更できるコンテキスト メニューを有効にする

Microsoft Edge 121 の時点での新規

パフォーマンス ツールの炎図のツリーを変更できる右クリック メニューを追加します。 この実験を有効にすると、 パフォーマンス ツールの炎のグラフでイベントを右クリックし、その場所にあるグラフを変更できます。

炎グラフ ツリーを変更するためのコンテキスト メニュー

右クリック メニューには、コンテキストに応じて次のメニュー項目が表示される場合があります。

  • Merge 関数
  • 折りたたみ関数
  • 繰り返しの子孫を折りたたむ
  • 折りたたみ関数を元に戻す
  • 繰り返しの子孫の折りたたみを元に戻す
  • すべての操作を元に戻す
  • プロファイルの読み込み
  • プロファイルの保存

関連項目:

状態:

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