Microsoft Edge の DevTools は、まだ開発中の試験的な機能へのアクセスを提供します。 この記事では、次のいずれかにある試験的な機能を一覧表示し、説明します。
- Microsoft Edge の Canary プレビュー チャネルの最新バージョン。
- Microsoft Edge の Stable リリースの最新バージョン。
Microsoft Edge のすべてのチャネルには、試験的な機能があります。 Microsoft Edge Canary チャネルを使用すると、最新の試験的機能を利用できます。 ご使用のバージョンの Microsoft Edge で使用できる実験の完全な一覧を表示するには、DevTools の [設定>実験] ページを参照してください。
これらの実験は不安定であるか、信頼性が低い可能性があり、DevTools の再起動が必要になる場合があります。
実験をオンまたはオフにする
試験的な機能は常に更新されており、パフォーマンスの問題が発生する可能性があります。 これは、実験をオフにする理由の 1 つです。
Microsoft Edge で実験をオンまたはオフにするには:
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl+Shift+I (Windows、Linux) または Command+Option+I (macOS) を押します。 DevTools が開きます。
DevTools のメイン ツール バーで、[ DevTools のカスタマイズと制御 ]
) ボタンをクリックし、[ 設定 ] 
) ボタンをクリックします。 または、 Shift + ?を押します。[ 設定 ] パネルの左側にある [ 実験] ページを選択します。
![[設定] の [実験] ページ](index-images/experiments-devtools.png)
実験のチェック ボックスをオンまたはオフにします。 一部の実験は既定で選択されています。
[DevTools 設定] の右上にある [閉じる] (
![[DevTools > 設定] の [閉じる] アイコン](index-images/settings-close-icon-light-theme.png)
) をクリックします。[ DevTools の再読み込み ] ボタンをクリックします。
実験が選択されている既定値の復元
試験的機能が有効になっている既定の設定を復元するには:
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl+Shift+I (Windows、Linux) または Command+Option+I (macOS) を押します。 DevTools が開きます。
DevTools のメイン ツールバーで、[ 設定 ]
) ボタンをクリックします。 または、 Shift + ?を押します。 [ 設定 ] パネルが開き、[ 設定] ページが選択されます。[ 基本設定] ページの下部にある [ 既定値に戻して更新 する] ボタンをクリックし、[ 閉じる] (
) をクリックします。
実験のフィルター処理
試験的な機能は、タイトルに含まれるテキストでフィルター処理できます。
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl+Shift+I (Windows、Linux) または Command+Option+I (macOS) を押します。 DevTools が開きます。
DevTools のメイン ツールバーで、[ 設定 ]
) ボタンをクリックします。 または、 Shift + ?を押します。 [ 設定 ] パネルが開き、[ 設定] ページが選択されます。[ 設定 ] パネルの左側にある [ 実験] ページを選択します。
[フィルター] テキスト ボックスをクリックし、タイムラインなどのテキストを入力します。 入力すると、一致するチェック ボックスのみが [実験 ] ページに表示されます。
フィルター処理を終了するには、[ フィルター] テキスト ボックスをオフにします。
実験に関するフィードバックの提供
試験的機能に関するフィードバックをお待ちしております。 フィードバックを共有するには、 Microsoft Edge DevTools チームにお問い合わせください。
実験の一覧
Microsoft Edge の Canary プレビュー チャネルの最新バージョンに表示される実験チェックボックスを以下に示します。 Canary でのチェックボックスの追加または削除に続いて、安定版のリリースも注目されます。
AI によるコンソール エラーの説明
コンソールの説明機能のオンかオフかを制御します。 コンソール の説明 機能がオンになっているときに Copilot アイコンをクリックすると、サイドバー チャットが開き、エラーが説明されます。
関連項目:
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
非消費型メッセージ
Durable Messages 実験は、ネットワーク ツールの Preserve log 機能の機能強化です。
[ 非消費型アイテム メッセージ] チェックボックスがオンになっている場合、DevTools は、要求と応答本文がプロセス間のナビゲーションを乗り越えるように、レンダラー プロセスの外部でネットワーク応答本文をバッファーに入れるようにブラウザーに指示します。 この機能は、ネットワーク ツールで [ログの保持] 設定が有効になっている場合にのみ有効になります。
[ 非消費型アイテム メッセージ ] チェック ボックスをオフにすると、既定の動作になります。応答本文はレンダラー プロセスに存在し、プロセス間のナビゲーション後には失われます。
関連項目:
- [ネットワーク機能リファレンス] のページ読み込み間での要求の保存。
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
CSS Copilot を有効にする
Microsoft Edge サイドバーで Copilot を使用して HTML 要素と CSS スタイルを説明できるようにします。これにより、[ 要素 ] ツールに表示される特定の要素またはスタイル ルールをより深く理解できます。 要素またはスタイル ルールについて Copilot に質問するには、その横にある [Copilot ] ボタンをクリックし、フォローアップの質問をします。
サイド バーがオフの場合、この実験は利用できません。
関連項目:
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
シンボル サーバー拡張機能のサポートを有効にする
このチェック ボックスをオンにすると、 Edge DevTools シンボル サーバー拡張機能 テスト拡張機能がサポートされ、拡張機能で シンボル サーバー の新しいエクスペリエンスが提供されます。 この拡張機能はまだベータ/テストの段階です。
このチェック ボックスがオフの場合は、DevTools >設定>シンボル サーバー ページを使用します。
関連項目:
- ソース マップを Azure Artifacts シンボル サーバーに発行して、元のコードを安全にデバッグする
- シンボル サーバー ソース マップを使用して、元Azure Artifactsを安全にデバッグする
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 には存在しません。
インストルメンテーション ブレークポイント
テスト ブレークポイントで停止するかどうか。 この実験により、ブレークポイントの信頼性が向上します。
関連項目:
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
JPEG XL のサポート
このチェックボックスを選択すると、 レンダリング ツールには [JPEG XL 画像形式を無効にする] チェックボックスが表示されます。
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
DevTools のキャッチされない例外をコンソールにログ記録します
コンソール ツールで DevTools のキャッチされない例外をログに記録するかどうかを制御します。
関連項目:
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
Visual Studio Code でソース ファイルを開く
Visual Studio Code 実験のオープン ソース ファイルでは、ローカル ファイルを編集するために、ソース ツールのコード エディターが Visual Studio Code に置き換えられます。 この実験を有効にすると、開発者ツールはローカル ファイルを編集していることを検出し、ワークスペースとして使用するフォルダーを選択するように求めるメッセージを表示します。
ワークスペースとして使用するフォルダーを選択するときに、DevTools でファイルへのリンクを選択すると、そのファイルが Visual Studio Code で開きます。 以前のバージョンの Microsoft Edge では、このアクションにより、DevTools のソース ツールのコード エディターでファイルが開かれていました。
DevTools で行った編集により、ハード ドライブ上のファイルが変更され、Visual Studio Code とライブで同期されるようになりました。
関連項目:
- Visual Studio Code でソース ファイルを開く - ワークスペースを設定します。
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。
プロトコル モニター
プロトコル モニター ツールを DevTools で使用できるようにします。
プロトコル モニター ツールには、検査対象のページをデバッグするために、DevTools によって送受信されるメッセージが表示されます。 DevTools は、Chrome DevTools プロトコル (CDP) を使用して、検査対象ページと通信します。
このチェック ボックスをオンにしてプロトコル モニター ツールを開くには、次の手順を実行します。
上記の「実験をオンまたはオフにする」で説明したように、このプロトコル モニター チェック ボックスを選択します。
DevTools の下部にある クイック ビュー で、[ その他のツール ] (+) ボタンをクリックし、[ プロトコル モニター] を選択します。
または、Ctrl+Shift+P (Windows/Linux) や Command+Shift+P (macOS) を押すなどしてコマンド メニューを開き、テキスト ボックスに「protocol」と入力します。 次に、[ プロトコル モニターの表示] を選択します。
プロトコル モニター ツールは、DevTools の下部にあるクイック ビュー パネルに表示されます。
関連項目:
- WebView2 アプリで Chrome DevTools プロトコル (CDP) を使用する
- [試験段階]DevTools の新機能のプロトコル モニター (Chrome 92)。
状態:
- このチェックボックスは、Microsoft Edge Canary 153 に存在します。
- このチェックボックスは、Microsoft Edge Stable 151 に存在します。