DevTools の新機能 (Microsoft Edge 115)

  • [アーティクル]

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 リポジトリに問題を提出します。

DevTools を Azure Artifacts シンボル サーバーに接続するための機能強化

Microsoft Edge 115 では、DevTools を Azure Artifacts シンボル サーバーに接続する方が簡単でカスタマイズしやすくなります。 以前のバージョンの Microsoft Edge では、シンボル サーバーに対する認証を行うために、Azure DevOps で個人用アクセス トークン (PAT) を生成し、DevTools に貼り付ける必要がありました。 これで、職場アカウントを使用して Microsoft Edge にログインしている限り、Microsoft Entra IDを使用してシンボル サーバーに接続できます。

さらに、さまざまな Azure DevOps 組織からソースマップをフェッチする必要がある場合に備えて、複数のシンボル サーバーに接続できるようになりました。 また、包含リストまたは除外リストにソースマップ URL を指定することで、DevTools がシンボル サーバーからフェッチするソースマップをフィルター処理することもできます。

DevTools 設定からMicrosoft Entra IDを使用してシンボル サーバーに接続する

[Azure DevOps organizationが選択されている必要があります] というメッセージは、organizationをダブルクリックするか、クリックして Enter キーを押します。

ワイルドカード

[ フィルター動作 ] テキスト ボックスでは、次のワイルドカードがサポートされています。

ワイルドカード 意味
? 1 文字に一致します。
* 任意の文字の 1 つ以上に一致します。

[除外リスト] を選択すると、DevTools は、リスト内のいずれかのエントリに一致する URL を持つスクリプトを除き、スクリプトのソース マップの検索を試みます。

[包含リスト] を選択した場合、DevTools は、リスト内のいずれかのエントリに一致する URL を持つスクリプトのソース マップの検索のみを試みます。 たとえば、[フィルター動作] ドロップダウン リストで [包含リスト] を選択し、[フィルター動作] テキスト ボックスに次のように入力するとします。

https://cdn.contoso.com/*
https://packages.contoso.com/*

この例では、DevTools は、これら 2 つの URL パターンに一致するソース マップの解決のみを試み、他のスクリプトのソース マップの読み込みを試みません。

関連項目:

メモリ ツールの機能強化

以前のバージョンの Microsoft Edge では、メモリ ツールで [タイムラインでの割り当てインストルメンテーション] オプションを使用する場合、メモリ ツールは 50 ミリ秒ごとにヒープのサンプルを受け取ります。 ただし、ヒープのサイズに応じてヒープ スケールのサンプルを作成するため、ヒープ サイズが 200 MB の場合、サンプルの生成には実際には 1.5 秒かかります。 その結果、ヒープ サンプルの生成以外に、Web サイトのメイン スレッドに残っている時間はほとんどありません。 タイムラインの割り当てインストルメンテーションが実行されている場合、Web コンテンツがハングしているかブロックされているようです。

Microsoft Edge 115 では、ヒープのサンプル レートがサンプルの生成にかかる時間にスケーリングされ、プロファイリング中に Web コンテンツと対話できるように、メイン スレッドが解放されるようになりました。

メモリ ツールの

さらに、以前のバージョンの Microsoft Edge では、ヒープ スナップショットに、ガベージ コレクション (GC'd) する必要があるオブジェクトが含まれる場合があります。 Microsoft Edge 115 では、この問題が修正され、ヒープ スナップショットがより正確になりました。

関連項目:

更新された DevTools のアイコンとボタン

Microsoft Edge 115 では、DevTools UI に新しいアイコンとボタンが追加されました。 たとえば、 ソース ツールでデバッグする場合、呼び出し履歴の現在のフレームは右向きの青い矢印で示されます。 このアイコンは、Microsoft Visual Studio と Microsoft Visual Studio Code のデバッグ アイコンとの一貫性が高くなります。

呼び出し履歴の現在のフレームの右向きの青い矢印アイコン

以前のバージョンの Microsoft Edge では、パフォーマンス ツールのボトムアップ ビューで、記録されたアクティビティを折りたたんで展開するための三角形のボタンが正しく表示されませんでした。 Microsoft Edge 115 では、この問題が修正され、個々のアクティビティを展開して折りたたんで、呼び出している関数を確認できるようになりました。

Bottom-Up ビューでアクティビティを展開および折りたたみするための三角形アイコン

関連項目:

デバイス モードでスクリーン リーダーがドロップダウン状態を正しく読み上げる

以前のバージョンの Microsoft Edge では、デバイス モードでは、これらのメニューが実際に折りたたまれたときに、スクリーン リーダーがドロップダウン メニューの状態を "展開" と誤って発表していました。 Microsoft Edge 115 では、この問題が修正され、スクリーン リーダーがデバイス モードのドロップダウン メニューの状態を "折りたたみ" または "展開" として正しく読み上げるようになりました。

デバイス モードで展開された [調整] ドロップダウン メニュー

関連項目:

パフォーマンス ツールのプロファイリングの機能強化

パフォーマンス ツールでプロファイルを記録する場合、V8 JavaScript エンジンは、実行中のすべての JavaScript 関数の定期的なサンプルを受け取り、フレーム チャートで CPU 時間を正確に報告します。 クロスドメイン iframe が多い Web サイトをプロファイリングする場合、これらのサンプルの収集には長い時間がかかります。 これにより、オーバーヘッドが大幅に増加し、メイン スレッドが遅くなり、プロファイリング中に Web サイトのパフォーマンスが低下します。 Windows 上の Microsoft Edge 115 では、V8 はこれらのサンプルをより効率的に収集するため、プロファイリング中のサイト パフォーマンスが向上します。

さらに、 パフォーマンス ツールで、プロファイルを記録するときに、フレーム チャートにプロファイラーのオーバーヘッドの表現を表示できるようになりました。 この時間ブロックは、プロファイルの記録時にイベントをサンプリングおよび解析するために必要な CPU 時間を表し、Web サイトのユーザーが実際に遭遇している CPU 時間を表すわけではありません。 パフォーマンス ツールでプロファイリングを行っている間だけ時間がかかるイベントではなく、実際のユーザーに影響を与えるコードのコンパイル イベントと評価スクリプト イベントのパフォーマンス調査に焦点を当てるのに役立つ、プロファイルオーバーヘッド イベントが炎のグラフに追加されました。

記録されたパフォーマンス プロファイルの

関連項目:

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

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