DevTools の [パフォーマンス] パネルのナビゲーションとフィルタリングを改善

Brendan Kenny
Brendan Kenny
GitHub Bluesky

公開日: 2025 年 3 月 19 日

Chrome のパフォーマンス ツールの改善に関する取り組みの一環として、DevTools のパフォーマンス パネルの操作方法のアップグレードをさらに発表いたします。これらの改善は、パフォーマンス トレースを操作する能力を強化し、無関係なノイズを減らすことを目的としています。これにより、パフォーマンスの問題を迅速に追跡して解決することに集中できます。

ナビゲーションの改善

パフォーマンス パネルのスクロールとズームが直感的ではないというフィードバックを、多くのユーザーからいただいておりました。長年使用しているユーザーには慣れているかもしれませんが、多くのユーザーは、スクロール操作はスクロールするものであり、トレースのズームインやズームアウトするものではないと考えています。

[] の新しいオプションで、既存の「従来」のスクロール方法と新しい「モダン」な方法を切り替えられるようになりました。

ショートカット オプション メニュー。モダン スクロールと従来型スクロールのラジオボタンが含まれています

従来モードでは、トラックパッドまたはスクロール ホイールでスクロールするとズームインとズームアウトが繰り返されますが、Shift キーを押しながらスクロールすると、ヒートマップが上下にスクロールします。

新しいモダン モードでは、これらの操作が逆になります。スクロールするとフラグチャートをスクロールし、Shift キーを押しながらスクロールするとズームインとズームアウトを行います。

キーボード ショートカット（WASD キーを使用してトレースを移動するなど）は、引き続き変更なく機能します。

双方向の概要

[パフォーマンス] パネルの上部に、タイムラインの概要の一部である [CPU] チャートがあります。トレース記録中の CPU 使用率の推定値が、ワークタイプ別に表示されます（スクリプト実行はオレンジ色、レンダリング オペレーションは紫色など）。

DevTools の [パフォーマンス] パネルの上部。CPU アクティビティが複数の色で可視化されています

これにより、トレース（ミニマップとも呼ばれる）の概要が表示され、特定の問題を詳しく調査するためにズームインしても、タイムライン全体の概要を確認できます。

ただし、主にトレースを見ているときにミニマップ内の正確な位置を見失うことがあります。また、その逆も同様です。そこで、概要とズームインしたビューを関連付ける新しい機能を導入しました。概要にカーソルを合わせると、対応する垂直線が炎グラフに表示され、炎グラフの同じ時点がマークされます。

同様に、フレームグラフ内のエントリにカーソルを合わせると、CPU グラフの対応する部分がハイライト表示されます。これは、CPU の急増の原因となっているタスクを正確に把握するのに役立ちます。

トレースをフィルタする

パフォーマンスの問題をデバッグするには、通常、大量のデータを調べる必要があります。最も関連性の高い情報に集中できるように、ノイズを除去する機能を改善しました。

昨年、[パフォーマンス] パネルでスクリプトを DevTools の無視リストに追加する機能が導入され、関連性の低いエントリを炎グラフから除外できるようになりました。たとえば、ページ内のコンポーネントのパフォーマンスをデバッグしている場合、フレームワークのコールスタックが深すぎてパフォーマンス パネルを上下にスクロールする必要がある場合は、気が散る可能性があります。また、重要な部分に集中するために、コールスタックの大部分を閉じることもあります。

ヒートマップ内のエントリを右クリックして [Add script to ignore list] を選択すると、そのスクリプトが DevTools の無視リストに追加され、そのエントリがヒートマップで閉じられます。

[パフォーマンス] パネルのエントリの右クリック メニュー。[無視リストにスクリプトを追加] オプションがハイライト表示されています

また、[パフォーマンス] パネルの上部にある [] から、無視リストを手動で直接編集することもできます。無視リストの正規表現は DevTools 間で共有されるため、ソースパネルでデバッグするときに一致したスクリプトはスキップされ、ヒートマップでは 1 つのエントリにまとめられます。このリストは DevTools セッション間で保持されます。

これにより、無視するファイルをきめ細かく制御でき、作業中にルールを有効または無効にできます。

サードパーティ スクリプトを暗く表示する

サードパーティ スクリプトはウェブサイトでは一般的ですが、多くの場合、Google の管理範囲外であるか、特定のデバッグ セッションには関係ありません。[パフォーマンス] パネルの上部にある新しい [サードパーティを暗くする] オプションを使用すると、タイムラインでサードパーティのスクリプトとネットワーク アクティビティがグレー表示されます。これにより、視覚的な煩雑さが軽減され、ファーストパーティのパフォーマンスへの貢献に集中できます。

ただし、特定のサードパーティに集中したり、独自の API や CDN からの貢献のみを許可したりなど、さらに細かく制御したい場合があります。パネルの下部にある [概要] タブには、DevTools がページで検出できるファーストパーティとサードパーティの詳細が表示されます。リスト内の各エンティティにカーソルを合わせると、そのエンティティに関連しないアクティビティがグレー表示されます。

まとめ

これらの新機能により、パフォーマンス パネルをより適切に操作し、不要な情報を除外して、重要なトレース部分に集中できるようになります。これらの機能をお試しいただき、さらに改善できる点や、追加して欲しい機能など、お知らせください。