DevTools の新機能 (Microsoft Edge 109)

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

ビデオ: DevTools 109 の新機能

ビデオ「DevTools 109 の新機能」のサムネイル画像

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

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

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

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

拡張トレース機能を試すには、次の手順を実行します。

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

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

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

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

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

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

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

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

インポート:

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

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

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

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

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

関連項目:

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

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

この設定をオンにすると、次の操作を実行します。

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

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

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

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

[ Selector Stats ] タブには、 Recalculate Style イベント中にブラウザー エンジンによって計算されたすべての CSS セレクターの一覧が表示されます。 セレクターは、処理にかかった 経過 時間、または一致した要素の数 ( [一致数] 列) で並べ替えることができます。 このデータは以下の目的で使用します。

  • ブラウザーの処理に時間がかかるセレクターを見つけて簡略化します。
  • パフォーマンスを向上させるために、セレクターをより具体的にします。

関連項目:

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

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

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

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

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

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

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

関連項目:

DevTools 用のヒープ スナップショット ビジュアライザー拡張機能

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

グラフ ビュー:

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

ツリー ビュー:

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

関連項目:

フォーカス モードでのクイック ビューの改善

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

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

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

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

  • スタイルの表示
  • 計算されたスタイルを表示

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

関連項目:

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

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

関連項目

  • 最終更新: