DevTools の新機能 (Microsoft Edge 102)

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

ヒント

Microsoft Build 2022 カンファレンスは 5 月 24 日から 26 日に開催されました。次のビデオでは、DevTools のメモリ、パフォーマンス、運用デバッグの新機能と、PWA 用の Web プラットフォームの新機能について詳しく説明します。

ビデオ: Microsoft Edge |DevTools 102 の新機能

DevTools 拡張機能: デバイスとモードのエミュレーションとソースマップのサポートを備えた新しいブラウザー

Visual Studio Code 用の Microsoft Edge DevTools 拡張機能に、さまざまなデバイスをエミュレートできるブラウザープレビューが追加されました。新しい CSS メディア機能のエミュレート () ボタンをクリックして、現在のプロジェクトをダーク、ライト、印刷、ハイコントラストなどのさまざまなモードでプレビューします。

DevTools 拡張機能: デバイスとモードのエミュレーションとソースマップのサポートを備えた新しいブラウザー

新しい [視覚障碍をエミュレートする ] () ボタンをクリックすると、かすみ目や色覚疾患のあるユーザーに対して Web ページがどのように見えるかを表示するなど、アクセシビリティを簡単にテストできます。

その他の新機能には、CSS ミラーリングを切り替える簡単な方法があり、ソースマップもサポートされるようになりました。これは、Sass、React、およびその他の抽象化によって作成された CSS をブラウザでデバッグおよび変更し、ソースファイルの変更を確認できることを意味します。

関連項目:

ヒープスナップショットから JSON にすべての文字列を保存する

Microsoft Edge 102 では、メモリ ツールでヒープスナップショットを取得するときに、スナップショットから JSON ファイルにすべての文字列オブジェクトをエクスポートできるようになりました。 メモリ ツールの コンストラクター セクションで、(string) エントリの横にある新しい [すべてをファイルに保存] ボタンをクリックします。

ヒープスナップショットから JSON にすべての文字列を保存する

メモリ ツールは、ヒープスナップショットからすべての文字列オブジェクトを含む JSON ファイルをエクスポートします。

JSON ファイル内のヒープスナップショットからの文字列

関連項目:

メモリツールを使用してヒープスナップショットから JSON に文字列を保存およびエクスポートする (「ヒープスナップショット」プロファイリングの種類) を使用してヒープスナップショットを記録します。

メモリツールの保持用の新しいフィルター

以前のバージョンの Microsoft Edge では、サイクルと内部ノードはヒープスナップショットの [保持] セクションに表示されていました。保持パスを簡略化するために、Microsoft Edge 102 では、メモリ ツールの保持セクションに、サイクルを非表示にしたり、保持パス内の内部ノードを非表示にしたりするための新しいフィルターが追加されました。

「 リテーナー 」セクションでは、循環したノードはグレー表示で示されます。

次の図では、[ エッジをフィルター処理] ドロップダウンメニューで、[ 循環を非表示 にする] が選択されていないため、循環ノード (灰色表示) が表示されます。

[エッジをフィルター処理] ドロップダウンメニューで、[循環したものを非表示にする] が選択されていません

次の図では、[ エッジをフィルター処理] ドロップダウンメニューで、[ 循環を非表示に する] が選択されているため、循環ノードは表示されません。

[エッジをフィルター] ドロップダウンメニューで、[循環したものを非表示にする] が選択されています

サイクルとは 、保持パス内に少なくとも 2 回出現するノードのことです。ノードの 1 つの出現は保持パスの早い方にあり、そのノードの他の出現は保持パスの後方にあります。メモリを解放するには、保持パスの最初に表示されるノードの出現を削除することが最も重要です。ノードの 2 番目以降の外観は、引き続き [保持] セクションに表示されます。

内部ノード は、V8 (Microsoft Edge の JavaScript エンジン) に固有のオブジェクトです。内部ノードも「 保持」 セクションに表示されます。

関連項目:

メモリツールを使用してヒープスナップショットを記録する (プロファイリングの種類 "ヒープスナップショット") でサイクルを非表示にします。

以前は、[ 要素 ] ツールで、選択したノードのオーバーレイは、[ 検査] ツール () を使用したときにのみ、ホバー時にのみ表示されていました。以前の設計は、画面拡大鏡やその他の支援技術では使いにくかったです。

Microsoft Edge 102 では、検査ツールを使用してレンダリングされた Web ページ内を移動するときに、現在の検査オーバーレイを表示したままにすることができます。 Ctrl+Alt (Windows、Linux) または Ctrl+Option (macOS) を押しながら、レンダリングされた Web ページ内を移動します。レンダリングされた Web ページのさまざまな部分にカーソルを合わせても、[ 検査 ] ツールの既存のヒントとグリッドの色オーバーレイが表示されたままになります。

要素の検査のヒント