次の方法で共有

DevTools の新機能 (Microsoft Edge 109)

  • [アーティクル]

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 109 の新機能

ビデオのサムネイル画像

新しい拡張トレース機能を使用して DevTools インスタンスをインポートおよびエクスポートする

Microsoft Edge 109 では、新しい設定を有効にして、 パフォーマンス および メモリ ツールから拡張トレースをエクスポートできます。 これらの拡張トレースには、次のような詳細情報が含まれます。

  • コンソールにログに記録されたメッセージ。
  • 記録時にページで実行されていた JavaScript。
  • DOM のスナップショット。

パフォーマンス プロファイル、ヒープ スナップショット、割り当てタイムライン、または割り当てサンプリングを保存するときに、新 .devtools しいファイル形式をエクスポートできるようになりました。 その後、ファイルを .devtools インポートすると、DevTools の新しいインスタンスが開き、 要素、 コンソール、 ソース の各ツールの状態が保持されます。 これらの強化されたトレースは、DevTools で共同作業を行い、情報を共有するための強力な新しい方法を提供します。

拡張トレース機能を試すには:

  1. DevTools で、[ 設定] ([設定] アイコン) ボタンをクリックします。

  2. [基本設定] 設定ページの [永続化] セクションで、[拡張パフォーマンスとメモリ トレースのエクスポート] チェック ボックスをオンにします。

    [設定 > ] [永続化 > ] チェック ボックス

  3. コンソール メッセージ、JavaScript、または DOM スナップショットを保持する場合は、対応するチェック ボックスをオンにします。

  4. DevTools の [設定] の [閉じる (x)] ボタンをクリックします。

  5. パフォーマンス ツールで、記録を行います。

  6. [プロファイルの保存] ([プロファイルの保存] アイコン) ボタンをクリックします。

  7. [ 名前を付けて保存 ] ダイアログで、新しい .devtools ファイルを保存します。

インポート：

  1. [プロファイルの.devtools読み込み] (プロファイルの読み込みアイコン) ボタンをクリックして、パフォーマンス ツール内からファイルをインポートします。

    パフォーマンス ツール内からのトレースのインポート

  2. 新しい DevTools ウィンドウが開きます。これには、記録したプロファイルが読み込まれた パフォーマンス ツールなど、ツールのサブセットが含まれます。 [要素]、[コンソール]、[ソース] ツールにも、保存状態が事前に設定されています。

    トレース インポート コンソール

新しい.devtoolsファイル形式でメモリ ツールからエクスポートすることもできます。 これは、DevTools チームが積極的に実験している新機能であるため、[ フィードバック] 拡張トレース実験 #122 でフィードバックをお寄せください。

関連項目:

実行時間の長いスタイルの再計算イベントを新しいセレクター統計でデバッグする

Microsoft Edge 109 のパフォーマンス ツールでは、 パフォーマンス ツールの [高度なレンダリング インストルメンテーションを有効にする (低速)]設定をオン にして、新しいセレクター統計機能にアクセスできます。

この設定をオンにした場合:

  1. [ レコード] を選択し、Web サイトまたはアプリで改善するシナリオを実行します。

  2. [ 停止] を選択します。

  3. [ スタイルの再計算] イベントを 選択します。 パフォーマンス ツールの下部セクションで、[セレクターの統計] タブを選択します。

    パフォーマンス ツールの設定 [レンダリングインストルメンテーションの詳細設定を有効にする (低速)] チェックボックスと [セレクター統計] タブ

[ セレクターの統計 ] タブには、[ スタイルの再計算 ] イベント中にブラウザー エンジンによって計算されたすべての CSS セレクターの一覧が表示されます。 セレクターは、処理に かかった経過時間、 または一致した要素の数 ( [一致数 ] 列) で並べ替えることができます。 このデータを使用して、次の操作を行います。

  • ブラウザーの処理に長い時間がかかるセレクターを検索し、それらを簡略化します。
  • セレクターをより具体的にして、パフォーマンスを向上させます。

関連項目:

割り当てサンプリング時にガベージ コレクションによって破棄されたオブジェクトを追跡する

Microsoft Edge 109 では、メモリ ツールの [割り当てサンプリング プロファイルの種類] に、次の 2 つの新しいオプションが追加されました。

  • メジャー GC によって破棄されたオブジェクトを含めます。

  • マイナー GC によって破棄されたオブジェクトを含めます。

これらのオプションを選択しないと、 メモリ ツールは以前と同様に機能し続け、プロファイリング セッションの最後にまだ有効な割り当てを報告します。 このモードでは、生成され、ガベージ コレクション (GC'd) された後に消えるオブジェクトは、割り当てサンプリングによって追跡されません。

Web サイトまたはアプリによって生成されるガベージを追跡する場合は、両方のオプションを選択します。 結果のプロファイルでは、その後 GC'd だった JavaScript 関数によって生成されたガベージを確認できます。 コードで生成されるガベージの量を減らす場合は、これらのオプションを使用します。 メジャー GC とマイナー GC の違いの詳細については、「 ごみ箱の話: Orinoco ガベージ コレクター」を参照してください。

割り当てサンプリング プロファイル オプション

関連項目:

DevTools 用の新しいヒープ スナップショット ビジュアライザー拡張機能を試す

新しいヒープ スナップショット ビジュアライザー拡張機能を Microsoft Edge に追加して、ヒープ スナップショット ファイル内にあるデータの新しい視覚化を取得します。 この拡張機能をインストールすると、DevTools に新しい ヒープ スナップショット ビジュアライザー ツールが追加されます。 ヒープ スナップショット ビジュアライザー ツールでは、ヒープ スナップショット ファイルを読み込んで、有向グラフまたはツリーとして表されていることを確認できます。 これらの新しい視覚化を使用すると、ガベージ コレクション (GC) ルートから個々のノードへのリテーナー チェーンを調べることができます。

グラフ ビュー:

グラフ モードのヒープ スナップショット ビジュアライザー

ツリー ビュー:

ツリー モードのヒープ スナップショット ビジュアライザー

関連項目:

フォーカス モードでのクイック ビューの機能強化

フィードバックに耳を傾け、フォーカス モードの クイック ビュー オプションを改善しました。 クイック ビュー ドロップダウン リストでツールのサブセットのみを提供する代わりに、DevTools の [その他のツール] ([その他のツール] アイコン) ボタン (DevTools のメイン ツール バーなど) をクリックして、任意の DevTools ツールを選択できるようになりました。 DevTools の クイック ビュー パネルで任意のツールを読み込み、複数のツールを同時に表示します。

クイック ビュー ツール バーの状態は、DevTools セッション間で保持されます。 DevTools の上部ウィンドウで同じツールを開くと、 クイック ビュー パネルが自動的に折りたたまれます。

クイック ビュー パネルへのツールの追加

音声コマンド ユーザーが要素ツールの [スタイル] タブまたは [計算済み] タブに移動できないアクセシビリティの問題が発生しました。 コマンド メニューの 2 つの新しいコマンドを使用して、これらのタブにアクセスできるようになりました。

  • スタイルの表示
  • 計算スタイルを表示する

[スタイルの表示] コマンドと [計算されたスタイルの表示] コマンドを使用したコマンド メニュー

関連項目:

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

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