これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。
ビデオ: DevTools 106 の新機能
コマンド パレットの概要
コマンド パレットの実験は、Microsoft Edge 123 で削除されました。
Microsoft Edge 106 では、コマンド パレットの実験を有効にして使用できるようになりました。 コマンド パレットを使用すると、たった 1 つのキーボード ショートカット ( Ctrl+Shift+Space キー) でブラウザー管理コマンドと開発者ツールコマンドにアクセスできます。
コマンド パレットの実験を有効にするには:
edge://flagsに移動します。 次に、[ 検索フラグ] テキスト フィールドで、「 コマンド パレット」と入力を開始します。[ コマンド パレット] ドロップダウン メニューで、[ 有効] を選択します。
edge://flagsページの [コマンド パレット] セクションに表示されているキーボード ショートカットに注意してください。[有効] を選択すると右下に表示される [再起動] ボタンをクリックします。
実験を有効にした後、使用可能なブラウザー管理コマンドと DevTools コマンドにすばやくアクセスするには、次の手順を実行します。
Microsoft Edge (DevTools を開く場合と開いていない場合にかかわらず) で、 Ctrl+Shift+Space キーを押します。
入力を開始します。 コマンドは入力文字に基づいてフィルター処理され、 候補、 履歴、 DevTools などのカテゴリにグループ化されます。
フィルター処理を絞り込んで DevTools コマンドのみを一覧表示するには、より大きい (>) 文字を入力します。
問題 73 にコメントを投稿して、Microsoft Edge の将来のバージョンで表示してほしいコマンドをお知らせください : [フィードバック]MicrosoftEdge/DevTools リポジトリでのコマンド パレット実験!
Visual Studio Code の DevTools でコードの問題をフィルター処理して自動的に修正する
Visual Studio Code 用の Microsoft Edge DevTools 拡張機能にクイック 修正 オプションが用意され、問題を自動的に修正できるようになりました。
クイック修正オプションにアクセスするには:
コード内の波線で示される、DevTools 拡張機能によって報告された問題にマウス ポインターを合わせます。 問題の横に電球アイコンが表示されます。
電球 (
) アイコンをクリックします。 [ クイック修正 ] メニューが表示されます。
問題を解決するため、または問題としての報告を停止するために使用する クイック修正 を選択します。 問題を無視することを選択すると、この問題の種類を無視して再度報告しないように拡張機能に指示する
.hintrcファイルが自動的に作成されます。
関連項目:
- インライン問題分析とライブ問題分析におけるクイック修正と問題のフィルター処理を自動化
DevTools では、ソースマップをキャッシュするときに使用するディスク領域が削減されました
Microsoft Edge 101 以降、DevTools はソースマップを IndexedDB にキャッシュし始め、ソースマップを取得するネットワーク要求の量を減らしました。 ただし、これらのソースマップを削除しないと、この変更によって大量のディスク領域が使用される可能性があります。
Microsoft Edge 106 では、30 日間アクセスされていないソースマップを IndexedDB ストレージから削除することで、この問題が修正されました。 さらに、 localhost から提供されるソースマップもキャッシュされなくなります。 この問題に関するフィードバックをお送りいただきありがとうございます。
DevTools がソースマップをフェッチしてキャッシュする方法を理解するには、ソース マップ モニター ツールの [読み込み状態] 列を確認します。 Web ページを初めて読み込むと、 ソース マップ モニター ツールはソース マップがまだキャッシュされていないことを示します。
Web ページを更新すると、 ソース マップ モニター ツールは、キャッシュされたソース マップが使用されていることを示します。
IndexedDB キャッシュをクリアし、強制的に DevTools にソースマップの再読み込みをさせるには、コマンド メニューで [ソース マップ キャッシュのクリア] コマンドを実行します。 「 コマンド メニューのコマンドの実行」を参照してください。
履歴については、 問題 89 を参照してください。
関連項目:
- ソース マップが DevTools の新機能 (Microsoft Edge 101) で IndexedDB を使用してキャッシュされるようになりました
Chromium カラー テーマは非推奨になりました
信頼性を向上させるために、Chromium Light と Chromium Dark のテーマは非推奨になりました。 以前にこれらのテーマを選択していたユーザーは、それぞれ Light+ または Dark+ テーマに自動的に移行されます。
Light+ テーマの DevTools:
Dark+ テーマの DevTools:
Monokai や Solarized など、多くの DevTools カラー テーマから選択できます。 DevTools で色のテーマを変更するには、[ 設定 ] 
) ボタンをクリックし、[ 環境設定] ページの [テーマ] ドロップダウン メニューでテーマを選択します。
フォーカス モードとハイ コントラスト モードでのアクセシビリティの向上
フォーカス モードのドッキング位置ボタンとアクティビティ バーの場所ボタンがスクリーン リーダーでより適切に機能するようになりました
Microsoft Edge 105 では、フォーカス モードは、新しい [ドックの場所 ] ボタンや [アクティビティ バーの場所 ] ボタンなど、いくつかの改善を受けました。 Microsoft Edge 106 では、これらの新しいボタンがスクリーン リーダーなどの支援技術でより適切に機能するようになりました。
スクリーン リーダーは、現在選択されているド ック位置 ボタンまたは アクティビティ バーの場所 ボタンと、使用可能な場所オプションを表すボタンの数を読み上げるようになりました。
![フォーカス モードで再設計された [ドッキング] メニュー](devtools-106-images/focus-mode-redesigned-docking-menu.png)
関連項目:
- 支援技術を使用して DevTools に移動する
- フォーカス モード: DevTools の新機能 (Microsoft Edge 105) で、DevTools、アクティビティ バー、クイック ビューの位置制御が向上しました。
計算スタイルは、ハイ コントラスト モードでは見やすいです
ハイ コントラスト モードの場合、以前のバージョンの Microsoft Edge では、計算されたスタイルの展開ボタンと折りたたみボタンが、[要素] ツールの [計算済み] タブで正しくレンダリングされませんでした。 Microsoft Edge 106 では、この問題が修正されています。 展開ボタンと折りたたみボタンがハイ コントラスト モードで表示されるようになりました。
関連項目:
Chromium プロジェクトからのお知らせ
Microsoft Edge 106 には、Chromium プロジェクトからの次の更新プログラムも含まれています。
- [ソース] パネルで作成済み/デプロイ済みでファイルをグループ化する
- スタック トレースの改善
- デバッグ中の呼び出し履歴の改善
- [ソース] パネルで無視リストに登録されたソースを非表示にする
- コマンド メニューで無視リストにあるファイルを非表示にする
- [パフォーマンス] パネルの新しい [操作] トラック