Microsoft Edge DevTools は、まだ開発中の試験的な機能にアクセスできます。 この記事では、次のいずれかの試験的な機能の一覧と説明を行います。
- Microsoft Edge の Canary プレビュー チャネルの最新バージョン。
- Microsoft Edge の安定版リリースの最新バージョン。
Microsoft Edge のすべてのチャネルには、試験的な機能があります。 Microsoft Edge Canary チャネルを使用して、最新の試験的な機能を取得できます。 Microsoft Edge のバージョンで使用できる実験の完全な一覧を表示するには、DevTools の [設定>Experiments ] ページを参照してください。
これらの実験は不安定または信頼性が低く、DevTools の再起動が必要になる場合があります。
実験のオンとオフを切り替える
試験的な機能は常に更新され、パフォーマンスの問題を引き起こす可能性があります。 これは、実験をオフにしたい理由の 1 つです。
Microsoft Edge で実験を有効または無効にするには:
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
DevTools のメイン ツール バーで、[ DevTools のカスタマイズと制御 ] ([DevTools
) ボタンをクリックし、[ 設定 ] (
) ボタンをクリックします。 または、 Shift キーを押しながら?キーを押します。[設定] パネルの左側で、[実験] ページを選択します。
実験のチェック ボックスをオンまたはオフにします。 既定では、一部の実験が選択されています。
) をクリックします。[ 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 とフィードバックを共有するには、 Microsoft Edge DevTools チームにお問い合わせください。
実験の一覧
Microsoft Edge の Canary プレビュー チャネルの最新バージョンに表示される実験チェック ボックスを次に示します。 Canary のチェックボックスの追加または削除の背後に続いて、安定したリリースも確認できます。
AI Explain コンソール エラー
Explain コンソール機能がオンかオフかを制御します。 Explain コンソール機能がオンの場合、Copilot アイコンをクリックするとサイドバー チャットが開き、エラーが説明されます。
関連項目:
状態:
- このチェック ボックスは、Microsoft Edge Canary 153 に存在します。
- このチェック ボックスは、Microsoft Edge Stable 151 に存在します。
永続的なメッセージ
Durable Messages 実験は、ネットワーク ツールのログ保持機能の機能強化です。
[Durable Messages]\( 永続メッセージ \) チェック ボックスをオンにすると、DevTools は、要求と応答本文がプロセス間ナビゲーションを存続できるように、レンダラー プロセスの外部でネットワーク応答本文をバッファーするようにブラウザーに指示します。 この機能は、ネットワーク ツールで [ログの保持] 設定が有効になっている場合にのみ有効になります。
[Durable Messages]\( 永続メッセージ \) チェック ボックスがオフの場合、既定の動作は、応答本文がレンダラー プロセスに存在し、クロスプロセス ナビゲーションの後に失われます。
関連項目:
- [ネットワーク機能] リファレンスのページ読み込み間で要求を保存します。
状態:
- このチェック ボックスは、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 >Settings>Symbol Server ページを使用します 。
関連項目:
- ソース マップを 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 の Sources ツールのコード エディターでファイルが開かれました。
DevTools で行った編集によって、ハード ドライブ上のファイルが変更され、Visual Studio Code とライブ同期されるようになりました。
関連項目:
- Visual Studio Code でソース ファイルを開く - ワークスペースを設定します。
状態:
- このチェック ボックスは、Microsoft Edge Canary 153 に存在します。
- このチェック ボックスは、Microsoft Edge Stable 151 に存在します。
プロトコル モニター
DevTools でプロトコル モニター ツールを使用できるようにします。
プロトコル モニター ツールは、DevTools によって送受信されたメッセージを表示して、検査されたページをデバッグします。 DevTools は、Chrome DevTools Protocol (CDP) を使用して検査されたページと通信します。
このチェック ボックスをオンにし、 プロトコル モニター ツールを開くには:
上記の「実験のオンとオフを切り替える」の説明に従って、この [プロトコル モニター] チェック ボックスをオンにします。
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 153 に存在します。
- このチェック ボックスは、Microsoft Edge Stable 151 に存在します。