これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。
ビデオ: DevTools 112 の新機能
パフォーマンス ツールは、アウトプロセス iframe で実行されている JavaScript を最小化解除します
以前のバージョンの Microsoft Edge では、アウトプロセス iframe (OOPIF) での JavaScript の実行は DevTools から分離されていました。 その結果、 パフォーマンス ツールは、OOPIF からのパフォーマンス イベントにソースマップを適用できませんでした。 パフォーマンス ツールでプロファイルを記録する場合、ツールはフレーム グラフにマイニングされたファイル名と関数名のみを表示でき、縮小されていない名前は表示できません。
Microsoft Edge 112 では、 パフォーマンス ツールがソースマップを読み込み、OOPIF で追跡されるパフォーマンス イベントに適用するようになりました。 その結果、 パフォーマンス ツールでプロファイルを記録した後、OOPIF 内で発生する JavaScript 実行の最小化されていないファイル名と関数名を確認できるようになりました。
関連項目:
- パフォーマンス ツールでは、DevTools の新機能 (Microsoft Edge 111) で運用コードをプロファイリングするときに、ファイル名と関数名の最小化が解除されます。
- ソース マップを Azure 成果物シンボル サーバーに発行して、元のコードを安全にデバッグする
- シンボル サーバー ソース マップを使用して、元の Azure 成果物を安全にデバッグする
- パフォーマンス機能リファレンスでパフォーマンスを記録します。
CSS 概要ツールで、パフォーマンスをすばやく向上させるための非単純セレクターを表示します
CSS 概要ツールには、Web ページの CSS の概要スナップショットを取得するときに非単純 CSS セレクターのリストを表示する新しい非単純セレクター セクションがあります。 CSS 概要ツールの単純でない CSS セレクターの一覧では、長時間実行される Recalculate Styles イベントの原因となっている可能性のある一般的な原因を簡単に特定できます。
これは、パフォーマンスを低下させる可能性のあるセレクターの一覧です。 これらのセレクターが実際にパフォーマンスを低下させているかどうかを判断するには、パフォーマンス ツールのセレクター統計機能を使用します。
これらのセレクターを変更して、より具体的で一致する要素を減らして、以下の場合にブラウザーがスタイルを計算するのにかかる時間を短縮することができます。
- 要素が DOM に追加または DOM から削除される場合。
- 要素の属性が変更された場合 (
classやidなど)。 - マウスの移動やフォーカスの変更など、
:hoverルールに影響を与える可能性があるユーザー入力がいつ発生したか。
個々の CSS セレクターのパフォーマンスを分析し、変更の影響を分析するには、パフォーマンス ツールのセレクター統計機能を使用します。
関連項目:
Microsoft Edge の JSON ビューアーでは、コードの折り畳みがサポートされています
Microsoft Edge 110 以降では、ブラウザーで JSON を直接表示するための試験的機能である JSON ビューアーにアクセスできます。 以前は、JSON を表示するためにブラウザー拡張機能やテキスト エディターを使用していましたが、JSON がネットワークから取得されたかディスクから取得されたかに関係なく、Microsoft Edge で JSON ペイロードを直接検査できるようになりました。
Microsoft Edge 112 以降では、JSON ビューアーでコードの折りたたみがサポートされるようになりました。 JSON ビューアーは実験的な機能です。 JSON ビューアーをオンにして、コード フォールディングにアクセスするには:
edge://flagsに移動します。[ フラグを検索 ] テキスト フィールドに「 JSON ビューアー」と入力します。
[JSON ビューアー] ドロップダウン メニューで、[有効] を選択します。 右下に [ 再起動 ] ボタンが表示されます。
[ 再起動 ] ボタンをクリックします。
https://microsoftedge.github.io/Demos/json-dummy-data/256KB.json などの JSON ファイルに移動します。 行番号が左側に表示されます。
右上隅にある歯車 (
) アイコンをクリックし、[ コード折りたたみ ] チェック ボックスをオンにします。
コードの折りたたみをオンにすると、調査する JSON 内のオブジェクトと配列を展開および折りたたむことができるようになりました。
フィードバックをお送りください!
関連項目:
フォーカス モードの改善
フォーカス モード は、DevTools 用の新しい実験的なユーザー インターフェイスです。 フォーカス モードは DevTools UI を簡素化および合理化し、ツールの堅牢な機能セットを損なうことなく最大限のカスタマイズ性を提供します。 Microsoft Edge 112 では、フォーカス モードは次の改善を受けました。
Esc キーを押すと、クイック ビューが表示または完全に非表示になります
以前のバージョンの Microsoft Edge では、 フォーカス モードでは、 クイック ビュー パネルは常に折りたたまれているか展開されているかで表示されていました。 クイック ビュー パネルが折りたたまれている場合は、 Esc キーを押すとクイック ビュー パネルが展開され、その逆も同様です。 ただし、アクティビティ バーでコンソール ツールを選択している場合、クイック ビュー パネルを折りたたんでいるときに Esc キーを押すと、空白のビューが表示されました。 Microsoft Edge 112 では、この問題が修正されています。
Esc キーを押すと、クイック ビュー パネルが表示されたり、完全に非表示になったりするようになりました。 クイック ビュー パネルが現在非表示になっている場合、 Esc キーを押すと、 クイック ビュー パネルが展開されて表示されます。
クイック ビュー ツール バーが現在表示されている場合 (クイック ビュー パネルが折りたたまれているか展開されているかに関係なく)、Esc キーを押すと、クイック ビューのツールバーとパネルが完全に非表示になります。
専用 DevTools のノード アイコンが、アクティビティ バーの最初のアイコンと重ならなくなりました
フォーカス モードでは、DevTools が Node.js サーバーの実行を検出すると、ノード アイコンが表示されます。 このアイコンをクリックすると、専用の DevTools for Node が開きます。
更新日: 垂直アクティビティ バーは、Microsoft Edge 144 以降のバージョンではサポートされなくなりました。
Microsoft Edge 112 より前のバージョンでは、 アクティビティ バー が垂直方向にあるとき、ノード アイコンが最初のツール アイコンと重なり、最初のツールを選択するのが難しくなります。 この問題は修正されました。 アクティビティ バー が垂直の場合、ノード アイコンと最初のツール アイコンが重なりません。
垂直アクティビティ バーでは、カーソルを合わせたときにツール アイコンごとに 1 つのラベルのみが表示されます
更新日: 垂直アクティビティ バーは、Microsoft Edge 144 以降のバージョンではサポートされなくなりました。
フォーカス モードでは、アクティビティ バーが垂直方向にあるときに、アイコンの上にカーソルを合わせるか、キーボードでアイコンを選択すると、ツール名ラベルが表示されます。 これらのラベルは、 アクティビティ バーの各ツールのアイコンを把握するのに役立ちます。
以前は、キーボードでアイコンを選択するか、マウスでアイコンの上にマウス ポインターを置くと、2 つのラベルが同時に表示されました。 この問題は修正されました。1 つのラベルのみが表示されます。
Chromium プロジェクトからのお知らせ
Microsoft Edge 112 には、Chromium プロジェクトからの次の更新プログラムも含まれています。
- 要素 > スタイルの更新
- コンソールでのログポイントと条件付きブレークポイントのマーキング
- デバッグ中に関連しないスクリプトを無視する
- JavaScript Profiler の非推奨が開始されました
- コントラスト低下をエミュレートする
- Lighthouse 10