Microsoft Edge DevTools の試験的機能

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

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

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

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

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

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

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

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

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

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

   

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

5. ) をクリックします。

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

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

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

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

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

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

実験のフィルター処理

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

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 のチェックボックスの追加または削除の背後に続いて、安定したリリースも確認できます。

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

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

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

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

関連項目:

• DOM の表示と変更を開始する

状態:

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

プロトコル モニター

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

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

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

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

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

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

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

関連項目:

• WebView2 アプリで Chrome DevTools Protocol (CDP) を使用する
• [試験段階]DevTools の新機能 (Chrome 92) のプロトコル モニター。

状態:

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

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

Microsoft Edge 105 の時点での新規

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

関連項目:

• メモリ ツールを使用してヒープ スナップショットを記録する ("ヒープ スナップショット" プロファイルの種類)

状態:

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

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

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

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

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

関連項目:

• 新しい色コントラスト計算 - DevTools (Microsoft Edge 89) の新機能に関するページの高度な知覚コントラスト アルゴリズム (APCA)。
• 「CSS 機能リファレンス」の「カラー ピッカーを使用して色を変更する」。
• カラー ピッカーを使用してテキストの色のコントラストをテストする

状態:

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

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

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

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

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

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

関連項目:

• [アクセシビリティ] タブを使用してアクセシビリティをテストする
• DevTools の新機能 (Microsoft Edge 90) の要素ツールの完全なアクセシビリティ ツリー ビュー。

状態:

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

[スタイル] タブで新しいフォント エディターを有効にする

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

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

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

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

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

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

   

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

関連項目:

• [スタイル] ウィンドウで CSS フォントのスタイルと設定を編集する

状態:

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

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

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

関連項目:

• 問題ツールを使用して問題を検索して修正する

状態:

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

実験用 Cookie 機能を有効にする

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

関連項目:

• Cookie の表示、編集、および削除

状態:

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

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

Microsoft Edge 104 の時点での新規

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

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

関連項目:

• [ページ] タブを使用して、[ソース] ツールの概要で現在の Web ページを構築するリソースを調べる。

状態:

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

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

Microsoft Edge 106 の時点での新規

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

関連項目:

• 無視リストにコンテンツ スクリプトを追加する
• 一覧の無視の強化
• リストの無視設定の改善

状態:

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

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

Microsoft Edge 124 の時点での新規

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

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

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

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

関連項目:

• パフォーマンス機能リファレンスで、ウィンドウ、iframe、および専用ワーカー間のメッセージを表示します。
• パフォーマンス記録イベント リファレンス
• postMessage トレース イベントのデモ (レンダリング)
• postMessage トレース イベントのデモ (ソース コード)
• postMessage イベントとハンドラーは、DevTools の新機能 (Microsoft Edge 124) の他のイベントとは区別されます。

状態:

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

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

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

関連項目:

• コンソールの概要

状態:

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

Enable webhint

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

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

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

関連項目:

• 問題ツールを使用して問題を検索して修正する

状態:

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

要素に問題を表示する

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

関連項目:

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

状態:

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

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

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

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

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

関連項目:

• Visual Studio Code でソース ファイルを開く - ワークスペースを設定します。

状態:

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

CSS Copilot を有効にする

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

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

関連項目:

• 要素ツールを使用して HTML と CSS を検査、編集、デバッグする

状態:

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

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

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

関連項目:

• メモリ ツールを使用してヒープ スナップショットを記録する ("ヒープ スナップショット" プロファイルの種類)

状態:

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

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

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

関連項目:

• ランタイム パフォーマンスの分析 (チュートリアル)
• メモリ ツールを使用してヒープ スナップショットを記録する ("ヒープ スナップショット" プロファイルの種類)

状態:

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

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

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

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

関連項目:

• ランタイム パフォーマンスの分析 (チュートリアル)

状態:

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

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

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

関連項目:

• ランタイム パフォーマンスの分析 (チュートリアル)

状態:

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

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

パフォーマンス ツールで、V8 JavaScript ブラウザー エンジンのランタイム呼び出し統計を表示します。

状態:

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

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

Microsoft Edge 128 の時点での新規

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

状態:

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

関連項目:

• より多くのデータを使用してパフォーマンス トレースを共有する
• パフォーマンス機能のリファレンス
• パフォーマンス記録イベント リファレンス

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

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

関連項目:

• インストルメンテーション ブレークポイントで同期を有効にする
• ソース ファイルが初めて読み込まれると、ブレークポイントがトリガーされない可能性があります

状態:

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

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

Microsoft Edge 118 の時点での新規

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

関連項目:

• デバッグ用に、処理されたコードを元のソース コードにマップする
• ソース ツールの概要で読み取り可能なコードを表示するために、縮小されたコードをソース コードにマッピングします。

状態:

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

関連項目

• Microsoft Edge Web プラットフォームのリリース ノート