DevTools の新機能 (Microsoft Edge 113)

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

ヒント

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

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

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

クラッシュ アナライザー ツールを使用して JavaScript エラー スタック トレースをデバッグする

新しい クラッシュ アナライザー ツールは、Microsoft Edge 113 の実験として利用できます。 クラッシュ アナライザー ツールでは、致命的でない JavaScript 例外などの JavaScript スタック トレースを入力し、ソースマップをスタック トレースに適用して、デバッグを高速化できます。

クラッシュ アナライザー ツールにアクセスするには、[設定]> [実験] で [クラッシュ アナライザーを有効にする] 実験を選択します。 「 実験をオンまたはオフにする」を参照してください。

致命的ではない JavaScript 例外または同様のデータは、Azure アプリケーション インサイトなどのツールに報告できます。

  1. まず、 クラッシュ アナライザー ツールを使用するには、 Source modules というセクションを含む、特別に書式設定されたスタック トレースが必要です。 このセクションには、エラー スタック トレースの一部であった JavaScript 関数へのソースマップ参照が含まれています。 これらのスタック トレースは、 Crash Analyzer Support npm パッケージを使用して生成できます。

  2. 次に、コードを実行しているブラウザからスタック トレースを実際に受け取る方法が必要です。 そのような方法の 1 つは、Azure アプリケーション インサイトを使用することです。「Application Insights の概要」を参照してください。

  3. スタック トレースを取得したら、 クラッシュ アナライザー ツールの左側のウィンドウに貼り付けます。

  4. クラッシュ アナライザー ツールで、[分析] ボタンをクリックします (または Ctrl + Enter キーを押します)。 右側のウィンドウには、スタック トレースを構成する元のファイル名と関数名が表示されます。

    クラッシュ アナライザー ツールを使用して致命的でない JavaScript 例外をデバッグする

  5. 個々のスタック フレームをクリックして、元のコードでエラーの原因となった行を確認します。

詳細については、「 クラッシュ アナライザー ツール」を参照してください。

関連項目:

メモリ ツールを使用して、ヒープ スナップショット内のオブジェクト名を最小化解除できます

Microsoft Edge 113 では、ソース マップが読み込まれている限り、ヒープ スナップショットを取得するときにメモリ ツールによって元のオブジェクト名が自動的に提供されるようになりました。 ソース マップは、Azure 成果物シンボル サーバーでホストすることで、確実かつ安全に読み込むことができます。

次の図では、メモリ ツールのヒープ スナップショットに、縮小されたオブジェクト名eが表示されます。

メモリ ツールのヒープ スナップショットには、縮小されたオブジェクト名が表示されます

Microsoft Edge 113 では、メモリ ツールによってヒープ スナップショット内のオブジェクト名が自動的に最小化解除されます。

メモリ ツールのヒープ スナップショットには、縮小されていないオブジェクト名が表示されます

関連項目:

問題ツールでは、キーボード ナビゲーションのサポートが向上しました

[問題] ツールで、[重大度] または [ブラウザー] フィルターを変更すると、[問題の再生成] ボタンを含む情報バーが [問題の再生成] ボタンが表示されます。 以前のバージョンの Microsoft Edge では、キーボードでこの情報バーを移動すると、[ 閉じる ] ボタンが表示されませんでした。 Microsoft Edge 113 では、この問題が修正されました。

キーボードで問題ツールを移動しても、[閉じる] ボタンが消えることがなくなりました

関連項目:

フォーカス モードで、ツールの上にカーソルを置いても、アクティビティ バーに各ツールの名前が表示されなくなりました

以前のバージョンの Microsoft Edge フォーカス モードで、水平モードの アクティビティ バーのツール のアイコンにカーソルを合わせると、 アクティビティ バー の他のツールの名前が表示されなくなります。 Microsoft Edge 113 では、この問題が修正されています。 ツール アイコンの上にマウス ポインターを置いてツールヒントにツールの名前を表示すると、他のツールの名前が アクティビティ バーに表示されたままになります。

アクティビティ バーのツール アイコンにカーソルを合わせると、ツールの名前を含むヒントが表示されます

DevTools のカスタマイズ メニューでは、VS Code テーマのサポートが向上しています

更新: Microsoft Edge 131 以降では、Visual Studio Code のテーマ機能は削除され、そのようなテーマは既定のテーマに戻ります。

  • Light+
  • Dark+

以前のバージョンの Microsoft Edge では、Solarized Light や Kimbie Dark などの Microsoft Visual Studio Code のテーマを適用すると、 DevTools メニューのアイテムにカーソルを合わせると、低コントラストの問題が発生していました。 Microsoft Edge 113 では、この問題が修正されています。 DevTools の カスタマイズと制御メニュー の項目が、十分な色のコントラストで表示されるようになりました。

Solarized Light テーマの [DevTools のカスタマイズ] メニューの十分な色のコントラスト

関連項目:

メモリ ツールのノードの種類フィルターは、ヒープ スナップショットの概要ビューにのみ表示されるようになりました

Microsoft Edge 100 では、ヒープ スナップショットを調べるときに、Arrayや String などの特定の種類のオブジェクトのみに集中できるように、メモリ ツールにノードの種類フィルターを追加しました。 このノード・タイプ・フィルタは、ヒープ・スナップショットの「サマリー」ビューに表示されるオブジェクトにのみ適用されます。

「ノード・タイプ」フィルターは、ヒープ・スナップショットの「包含」ビューまたは「統計」ビューが選択されている場合にも表示され、これらのビューにはフィルターが適用されません。 この問題は修正されています。 Microsoft Edge 113 では、 ノード の種類フィルターは、 概要 ビューが選択されている場合にのみ表示されます。

ノード・タイプ・フィルタは、ヒープ・スナップショットの「サマリー」ビューに表示されます

「 封じ込め」 ビューと 「統計」 ビューでは、「 ノード・タイプ 」フィルターは適用されないため、表示されなくなりました。

「ノード・タイプ」フィルターがヒープ・スナップショットの「封じ込め」ビューに表示されない

関連項目:

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

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

関連項目

  • 最終更新: