次の方法で共有

DevTools の新機能 (Microsoft Edge 121)

  • [アーティクル]

Microsoft Edge DevTools の最新機能と Microsoft Visual Studio Code および Visual Studio 用の Microsoft Edge DevTools 拡張機能をチェックするには、これらのお知らせをお読みください。

最新の状態を維持し、最新の DevTools 機能を入手するには、Insiders プレビュー バージョンの Microsoft Edge をダウンロードしてください。 Windows、Linux、macOS のいずれを使用している場合でも、既定の開発ブラウザーとして Canary (または別のプレビュー チャネル) を使用することを検討してください。 Microsoft Edge のベータ版、開発版、カナリア版は、Microsoft Edge の安定したリリースバージョンと並べて、個別のアプリとして実行されます。 「Microsoft Edge Insider Channels」を参照してください。

最新のお知らせについては、 Twitter の Microsoft Edge チームに従ってください。 DevTools に関する問題を報告したり、新機能を要求したりするには、 MicrosoftEdge/DevTools リポジトリに問題を提出します。

3D ビュー ツールの Z インデックスタブと DOM タブが機能するようになりました

Microsoft Edge の最近のバージョンでは、 3D ビュー ツールに Z-index タブと DOM タブが正しく動作しないバグがありました。 タブがクラッシュまたはフリーズし、代わりに [複合レイヤー] タブのコンテンツが 表示されます。 この問題は、Microsoft Edge 121 で修正されました。

3D ビュー ツールの [Z-index] タブ

関連項目:

正しい [デバッガーの非表示] または [デバッガーの表示] アイコンが [ソース] ツールに表示される

[ソース] ツールの右側にある [デバッガー] ウィンドウを折りたたんだり展開したりするために使用するアイコンが正しくありません。 [デバッガーの表示] アイコンではなく [デバッガーの非表示] アイコンが表示され、その逆も同様です。

ソース ツールのアイコン(前)

Microsoft Edge 121 では、正しいアイコンが表示されます。

[ソース] ツールのアイコン

関連項目:

カバレッジ ツールでソース マップのサポートを追加しました

Microsoft Edge 121 より前の カバレッジ ツールでは、生成されたファイルの情報のみが表示され、ソース マップがアタッチされている場合でもソース ファイルは省略されていました。 カバレッジ ツールが改善され、生成されたファイルにソース マップがアタッチされている場合、カバレッジ ツールはソース ファイルと生成されたファイルの情報を表示するようになりました。

たとえば、Microsoft Edge 121 より前の場合、 Slow Calendar デモ ページ のカバレッジ レポートには、 bundle.js ファイルの 1 つの静的な行のみが含まれていました。 bundle.jsカバレッジ レポートの行を展開して、このコンパイル済bundle.jsみファイルを構成するすべての元のソース ファイルを表示できるようになりました。

ソース マップされたソース ファイルと生成されたファイルの情報を示すカバレッジ ツール

関連項目:

パフォーマンス ツールの [ボトムアップ]、[コール ツリー]、[イベント ログ] タブの高度なフィルター機能

パフォーマンス ツールでは、次の高度なフィルターボタンが[ボトムアップ]、[コール ツリー]、および [イベント ログ] タブに追加されました。

  • 大文字と小文字の一致。
  • 正規表現を使用します。
  • 単語全体に一致します。

パフォーマンス ツールの [ボトムアップ]、[コール ツリー]、および [イベント ログ] タブの [大文字と小文字の一致]、[正規表現を使用する]、および [単語全体に一致する] ボタン

また、[ ボトムアップ ] タブでは、フィルターが更新され、すべてのノードに一致するのではなく、最上位の項目にのみ適用されるようになりました。

関連項目:

PWA ウィンドウ コントロール オーバーレイのツール

アプリケーション ツールには、PWA 開発者が PWA をインストールし、ウィンドウ コントロールに対応するために必要なスタイル変更を加えることなく、アプリケーションがウィンドウ コントロールを処理する方法のプレビューを表示できるように、マニフェストの下に新しいウィンドウ コントロール オーバーレイ セクションがあります。

アプリケーション ツールの [ウィンドウ オーバーレイ コントロール] セクション

Windows、Linux、macOS のウィンドウ コントロールをエミュレートするには、[ ウィンドウ コントロール オーバーレイ ] セクションを使用します。

関連項目:

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

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