DevTools の新機能 (Microsoft Edge 114)

これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。

ヒント

Microsoft Build 2023 カンファレンスは、2023 年 5 月 23 日から 25 日に開催されました。 次のビデオでは、DevTools のメモリ、パフォーマンス、運用デバッグの新機能と、サイドバーの PWA、WebView2、Chat プラグインの新機能について詳しく説明します。

ビデオ: DevTools 113 および 114 の新機能

ビデオ「DevTools 113 および 114 の新機能」のサムネイル画像

パフォーマンス ツールのセレクター統計の集計

Microsoft Edge 109 では、パフォーマンス ツールにセレクター統計機能が追加されました。 セレクター統計のデータを使用すると、パフォーマンス ツールのスタイル再計算イベント中に最も時間がかかり、パフォーマンス低下の一因となっている CSS セレクターを把握できます。

Microsoft Edge 114 では、そのイベント中に再計算されたセレクターを表示するために、個々の 再計算スタイル イベントを選択する必要がなくなりました。 代わりに、[パフォーマンス] ツールの下部ペインにある [セレクターの統計] タブでは、記録されたプロファイルのすべての再計算スタイル イベントのデータが自動的に集計されます。 プロファイルの特定の部分を拡大すると、[ セレクター統計 ] タブが更新され、現在分析しているプロファイルの部分のデータのみが表示されます。

また、[Selector Stats] タブに新しいスタイル シート列が追加されました。[スタイルシート] 列には、各セレクターが定義されているスタイルシートに戻るリンクが含まれています。

セレクター統計は、記録されたプロファイルの現在表示されているセクション内のスタイルの再計算イベント全体に集計されるようになりました

セレクター統計機能を使用し、GitHub でフィードバックを共有していただきありがとうございます 問題 #98: [フィードバック] セレクター パフォーマンス トレースの説明!

関連項目:

[問題] ツールと [スタイル] ウィンドウは、レイアウトをトリガーする CSS プロパティについて警告します

DevTools は、Web ページで CSS アニメーションを使用している場合に、移動するテキストなど、レイアウトベースのパフォーマンスの問題を引き起こす可能性がある CSS プロパティを検出し、警告します。 レイアウト は、ドキュメント内の要素の位置とジオメトリを再計算し、ドキュメントの一部または全部を再レンダリングするための Web ブラウザー プロセスです。 レイアウトはブラウザーでのユーザー ブロック操作であるため、Web コンテンツをスムーズで操作に応答できるように、レイアウトを可能な限り制限することをお勧めします。

変換や不透明度などの一部の CSS プロパティは、ブラウザーのコンポジター スレッドで実行されるため、レイアウト操作をトリガーしません。 ただし、レイアウトをトリガーしない CSS プロパティでも、CSS アニメーションと組み合わせて使用すると、パフォーマンスに悪影響を及ぼす可能性があるペイント操作をトリガーする可能性があります。

要素ツールの [スタイル] ウィンドウで、レイアウトまたはペイント操作をトリガーする CSS プロパティに波線の下線とヒントが追加されました。 ヒントで問題を表示するには、波線の上にマウス ポインターを置きます。

[スタイル] ウィンドウでの CSS レイアウトの問題

[ 問題 ] ツールの [パフォーマンス ] カテゴリで、"このプロパティを変更すると、'レイアウト' がトリガーされます。 @Keyframes内で使用するとパフォーマンスに影響する可能性があります。" などの新しい種類の問題が報告されます。[ スタイル] ウィンドウを使用しているときに、[ 問題 ] ツールで問題を開くには、そのようなプロパティの Shift キー + 波線をクリックするか、波線を右クリックして [ 問題の表示] を選択します。 問題ツールが DevTools の下部にあるドロワー (現在のクイック ビュー パネル) で開きます。

問題ツールでの CSS レイアウトの問題

関連項目:

メモリ ツールは、1 GB を超える拡張トレースを読み込むことができます

以前のバージョンの Microsoft Edge では、1 GB を超える拡張トレースの読み込みに失敗しました。 Microsoft Edge 114 では、この問題が修正されています。 任意のサイズの拡張トレースを正常に読み込むことができるようになりました。

拡張トレースは Microsoft Edge の試験的機能であり、メモリ、パフォーマンス、要素、コンソール、およびソース ツール全体でできるだけ多くの状態を維持したまま、.devtools ファイルとして保存された DevTools インスタンス全体をエクスポートおよびインポートできます。 .devtools ファイルは別の DevTools インスタンスで開かれ、ソース コードへの参照を保持しながら、次のトレース情報を読み込みます。

  • DOM スナップショット。
  • コンソール メッセージ。
  • ヒープ スナップショット。
  • パフォーマンス プロファイル。

拡張トレース

関連項目:

メモリ ツールは、2 つのヒープ スナップショットをより正確に比較します

メモリ ツールでは、複数のヒープのスナップショットを取得して比較し、ヒープ内のオブジェクトの違いを見つけることができます。 以前のバージョンの Microsoft Edge では、ヒープ スナップショットを比較するときに メモリ ツールで 報告される新しいオブジェクトと削除されたオブジェクトが多すぎました。これは、オブジェクト ID がツールによって一貫して追跡されていないためです。 実際、これらの多くはおそらく同じオブジェクトです。

Microsoft Edge 114 では、一貫性のあるオブジェクト ID が複数のスナップショットにわたって追跡されるようにすることで、この問題が修正されました。

Microsoft Edge 114 で 2 つのヒープ スナップショットを比較しています

関連項目:

CSS 概要ツールのアクセシビリティの改善

Microsoft Edge 112 では、CSS 概要ツールが更新され、Web ページの CSS の概要スナップショットを取得するときに単純でないセレクターの一覧が表示されました。 Microsoft Edge 114 では、CSS 概要ツールの非単純セレクター セクションが、スクリーン リーダーなどの支援技術で使いやすくなりました。

セレクターをクリックするか、セレクターに移動して Enter キーを押すと、スクリーン リーダーで "コピーされた CSS セレクター" が読み上げられるようになりました。

キーボードを使用した CSS 概要ツールのナビゲーション

関連項目:

VS Code 用の DevTools 拡張機能では、ハイ コントラスト モードのサポートが向上しました

Visual Studio Code 用の Microsoft Edge DevTools 拡張機能の以前のバージョンでは、ハイ コントラスト モードで、ツール内のアイコンにカーソルを合わせても、十分なコントラストで UI コントロールがレンダリングされませんでした。 この問題は修正されています。

たとえば、[要素] ツールの [スタイル] ウィンドウで、要素にスタイルを適用するためのチェック ボックスが、ハイ コントラスト モードで正しくレンダリングされるようになりました。

VS Code 拡張機能のハイ コントラスト モードで [スタイル] ウィンドウのチェックボックスにカーソルを合わせる

また、 コンソール ツールで、[ コンソール サイドバーの表示 ] などのアイコンがハイ コントラスト モードで正しくレンダリングされるようになりました。

VS Code 拡張機能のハイ コントラスト モードで [コンソール サイドバーの表示] ボタンにカーソルを合わせる

関連項目:

Chromium プロジェクトからのお知らせ

Microsoft Edge 114 には、Chromium プロジェクトからの次の更新プログラムも含まれています。

関連項目

  • 最終更新: