これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。
Microsoft Edge DevTools チームからのお知らせ
Windows ハイ コントラスト モードで DevTools を使用する
Windows がハイ コントラスト モードの場合、Microsoft Edge DevTools はハイ コントラスト モードで表示されるようになりました。
Windows でハイ コントラスト モードを有効にするには、指示に従います。 Microsoft Edge で DevTools を開くには、 F12 キーまたは Ctrl+Shift+I キーを押します。 DevTools はハイ コントラスト モードで表示されます。
注: DevTools は現在、Windows でハイ コントラスト モードをサポートしていますが、macOS ではサポートしていません。
Chromium問題 #1048378
関連項目:
DevTools のキーボード ショートカットを Visual Studio Code と一致させる
Microsoft Edge DevTools チームは、フィードバックと Chromium パブリック問題トラッカーから、DevTools でキーボード ショートカットをカスタマイズできるようにしたいことを知りました。 Microsoft Edge 84 では、DevTools のキーボード ショートカットを Visual Studio Code と一致させることができるようになりました。これは、チームがショートカットのカスタマイズに取り組んでいる機能の 1 つにすぎません。
実験を試すには:
DevTools で、[?] を押すか、DevTools の [設定]
) アイコンをクリックして、[設定] を開きます。[ 実験] セクションで、[ カスタム キーボード ショートカットの設定タブを有効にする (再読み込みが必要)] チェック ボックスをオンにします。
DevTools を再読み込みします。
もう一度 [設定] を開き、[ ショートカット] セクションを選択します。
[ プリセットからショートカットを一致させる] ドロップダウン リストをクリックし、 [DevTools (既定)] を選択して、[ Visual Studio Code] を選択します。
DevTools のキーボード ショートカットが、Visual Studio Code の同等のアクションのショートカットと一致するようになりました。
たとえば、 Visual Studio Code でスクリプトを一時停止または続行する場合のキーボード ショートカットは F5 キーです。 DevTools (既定) プリセットでは、DevTools の同じショートカットは F8 ですが、Visual Studio Code プリセットでは、そのショートカットも F5 になります。
この機能は現在、Microsoft Edge 84 で実験として利用できますので、フィードバックを チームと共有 してください。
Chromium問題 #174309
関連項目:
Surface Duo エミュレーターのリモート デバッグ
Microsoft Edge DevTools の全機能を使用して、 Surface Duo エミュレーター で実行されている Web コンテンツをリモートでデバッグできるようになりました。
Surface Duo エミュレーターを使用すると、新しいクラスの折りたたみ式デバイスとデュアルスクリーン デバイスで Web コンテンツがどのようにレンダリングされるかをテストできます。 エミュレーターは Android オペレーティング システムを実行し、 Microsoft Edge Android アプリを提供します。 Microsoft Edge アプリに Web コンテンツを読み込み、DevTools を使用してデバッグします。
Microsoft Edge デスクトップ インスタンスの [edge://inspect] ページには、Surface Duo エミュレーターで実行されている開いているタブまたは PWA のリストを含む SurfaceDuoEmulator が表示されます。
デバッグするタブまたは PWA の [ 検査 ] をクリックして、DevTools を開きます。 Surface Duo エミュレーターで Web コンテンツをリモートでデバッグするには、ステップ バイ ステップ ガイドに従います: Surface Duo エミュレーターをリモートでデバッグします。
DevTools クイック ビュー パネルのサイズをより簡単に変更する
Microsoft Edge 83 以前では、ドロワーのツールバー内にカーソルを合わせてドロワー (現在のクイック ビュー パネル) のサイズを変更しました。 ドロワーの動作は、DevTools のウィンドウの他のサイズ変更コントロールとは異なり、ウィンドウの境界線にカーソルを置いてサイズを変更します。 次の図は、Microsoft Edge バージョン 83 以前で ドロワー のサイズ変更がどのように機能したかを示しています。
Microsoft Edge 84 以降では、枠線をポイントすると ドロワー のサイズを変更できます。 この変更により、 ドロワー のサイズ変更の動作が DevTools の他のウィンドウに揃えられます。 次の画像は、Microsoft Edge 84 以降で ドロワー のサイズ変更がどのように機能するかを示しています。
Chromium問題 #1076112
スクリーンキャスト ナビゲーション ボタン フォーカスを表示する
Android デバイス、Windows 10 以降のデバイス、または Surface Duo エミュレーターをリモート デバッグする場合、DevTools の左上隅にある [
] アイコンを使用してスクリーンキャストを切り替えることができます。 スクリーンキャストを有効にすると、DevTools ウィンドウからリモート デバイス上の Microsoft Edge のタブを移動できます。
Microsoft Edge 84 では、これらのナビゲーション ボタンにもキーボードでアクセスできるようになりました。 たとえば、スクリーンキャストされた URL バーで Shift+Tab キーを押すと、[ 更新] ボタンにフォーカスが置かれます。
![スクリーンキャストされた URL バーから Shift+Tab キーを押すと、[更新] ボタンにフォーカスが置かれます](devtools-images/screencasting-nav.png)
Chromium問題 #1081486
ネットワーク パネルの詳細ウィンドウにアクセスできるようになりました
Microsoft Edge 84 では、ネットワーク ツールの詳細ウィンドウを開いたときに、ネットワーク ログのリソースにフォーカスされるようになりました。 この変更により、スクリーン リーダーは 詳細 ウィンドウのコンテンツを読み上げて操作できるようになります。
![[ネットワーク] パネルを開くと、詳細ウィンドウにフォーカスが適用されるようになりました](devtools-images/network-details.png)
Chromium問題 #963183
Chromium プロジェクトからのお知らせ
次のセクションでは、オープンソース Chromium プロジェクトに提供された、Microsoft Edge 84 で利用できるその他の機能について説明します。
DevTools ドロワーの新しい問題ツールを使用してサイトの問題を修正する
DevTools の下部にあるドロワー (現在のクイック ビュー パネル) の新しい問題ツールにより、コンソールの通知の疲れとすっきりとした状態が軽減されます。 現在、 コンソール は、Web サイト開発者、ライブラリ、フレームワーク、Microsoft Edge がメッセージ、警告、エラーをログに記録するための中心的な場所です。 [問題] ツールは、構造化され、集約された、実用的な方法でブラウザーからの警告を集約します。 問題ツールは、DevTools 内で影響を受けるリソースにリンクし、問題の修正方法に関するガイダンスを提供します。
時間が経つにつれて、コンソール メッセージを合理化するために、コンソールではなく問題ツールにより多くの警告が表示されます。
開始するには、「 問題ツールを使用して問題を検索して修正する」を参照してください。
Chromium問題 #1068116
[検査モード] ツールヒントでアクセシビリティ情報を表示する
[検査モード] ツールヒントに、要素にアクセス可能な名前と役割があり、キーボードでフォーカスできるかどうかが示されるようになりました。
![アクセシビリティ情報を含む [検査モード] ヒント](devtools-images/a11y.png)
Chromium問題 #1040025
関連項目:
- [検査] ツールを使用してページを分析する
- 斧: 名前 ロール値 - アクセシビリティ対応の名前とロールについて、webhint.io。
- 斧: キーボード - キーボード フォーカス可能、webhint.io。
パフォーマンス パネルの更新
関連項目:
フッターに合計ブロック時間情報を表示する
読み込みパフォーマンスを記録した後、 パフォーマンス ツールのフッターに合計ブロック時間 (TBT) 情報が表示されるようになります。 TBT は、ページが使用可能になるまでにかかる時間を定量化するのに役立つ読み込みパフォーマンスの指標です。 TBT は基本的に、ページが使用可能に 見える 時間だけを測定します (コンテンツが画面にレンダリングされるため)。しかし、JavaScript がメイン スレッドをブロックしているため、ページがユーザー入力に応答しないため、ページは実際には使用できません。 TBT は、最初の入力遅延を概算するための主要なメトリックです。
合計ブロック時間の情報を取得するには、ページの読み込みパフォーマンスを記録するために [ページの更新] 
を使用しないでください。
代わりに、[![記録] アイコン](devtools-images/record-icon.png){kind=icon}
を選択し、ページを手動で再読み込みし、ページが読み込まれるまで待ってから、記録を停止します。
Total Blocking Time: Unavailableが表示されている場合、Microsoft Edge DevTools は Microsoft Edge の内部プロファイリング データから必要な情報を取得できませんでした。
Chromium問題 #1054381
関連項目:
新しいエクスペリエンス セクションでシフト イベントをレイアウトする
パフォーマンス ツールの新しい Experience セクションは、レイアウト シフトを検出するのに役立ちます。 累積レイアウト シフト (CLS) は、不要な視覚的不安定性を定量化するのに役立つメトリックです。
レイアウト シフト イベントをクリックすると、レイアウト シフトの詳細が [概要] ウィンドウに表示されます。 [ 移動元 ] フィールドと [移動先] フィールドにマウス ポインターを置くと、レイアウト シフトが発生した場所を視覚化できます。
関連項目:
コンソールでのより正確な promise 用語
Promiseをログに記録するときに、コンソールPromiseStatus誤って resolved に設定された値を指定しました。
コンソールで使用される用語 fulfilled は、Promise の仕様に合わせて調整されます。
Promise仕様の詳細については、GitHub の「States and Fates」を参照してください。
V8 の問題 #6751
関連項目:
スタイル ウィンドウの更新
2026 年 8 月更新: 記事「CSS フォントのスタイルと設定を [スタイル] ウィンドウで編集する」とその実験チェックボックスが削除されました。
元に戻すキーワード (keyword)のサポート
[スタイル] ウィンドウのオートコンプリート UI で、元に戻す CSS キーワード (keyword)が検出されるようになりました。これにより、プロパティのカスケードされた値を、要素のスタイルに適用される以前の値に戻されます。
Chromium問題 #1075437
画像プレビュー
[スタイル] ウィンドウでbackground-image値の上にマウス ポインターを置くと、ヒントに画像のプレビューが表示されます。
Chromium問題 #1040019
カラー ピッカーで、スペースで区切られた機能的な色表記が使用されるようになりました
CSS カラー モジュール レベル 4 では、 rgb() などのカラー関数がスペースで区切られた引数をサポートする必要があることを指定します。 たとえば、rgb(0, 0, 0) は rbg(0 0 0) に相当します。
カラー ピッカーで色を選択するか、Shift キーを押しながら背景色の値を選択して [スタイル] ウィンドウで色表現を切り替えると、スペース区切りの引数構文が表示されます。
![[スタイル] ウィンドウでのスペース区切り引数の使用](devtools-images/color.png)
また、[ 計算] ウィンドウと [検査モード ] ツールヒントに構文を表示する必要があります。
color () などの今後の CSS 機能では、非推奨のコンマ区切り引数構文がサポートされていないため、Microsoft Edge DevTools では新しい構文を使用しています。
スペース区切り引数の構文は、しばらくの間ほとんどのブラウザーでサポートされてきました。 「 Can I use: スペースで区切られた機能的な色表記」を参照してください。
Chromium問題 #1072952
[要素] パネルのプロパティ ウィンドウの廃止
要素ツールの [プロパティ] ウィンドウは非推奨です。 代わりにコンソールで console.dir($0) を実行してください。
![非推奨の [プロパティ] ウィンドウ](devtools-images/properties.png)
リファレンス
マニフェスト ウィンドウでのアプリ ショートカットのサポート
アプリケーション ツールの [マニフェスト] ページにアプリのショートカットが表示されるようになりました。 アプリのショートカットを使用すると、ユーザーが Web アプリ内の共通または推奨されるタスクをすばやく開始できます。 アプリのショートカット メニューは、ユーザーのデスクトップまたはモバイル デバイスにインストールされている Progressive Web Apps に対してのみ表示されます。
関連項目:
注:
このページの一部の情報は、 Google によって 作成および共有されている著作物に基づいており、 Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Kayce Basques によって作成されています。
この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。