聞き覚えはありませんか？Chrome DevTools でパフォーマンスの問題をデバッグしているが、[パフォーマンス] パネルに表示される情報量が多すぎて、最も関連性の高い対処可能な部分にのみ集中できない。タイムラインの長さ、フレームチャートの奥行き、データの多様さなど、多種多様なデータを扱うことは簡単ではありません。パフォーマンス パネルは非常に強力ですが、その有用性がユーザビリティの犠牲になる必要はありません。
Chrome のパフォーマンス ツールを改善する取り組みの一環として、Google は先日、情報の密度を減らし、デベロッパーのワークフローのカスタマイズを支援することを目的とした 3 つの新機能をリリースしました。
この投稿では、これらの機能のそれぞれについて詳しく説明し、これらの機能を使用して最も重要な情報にのみ集中する方法をご紹介します。
タイムラインの無関係な部分を非表示にする
ウェブ パフォーマンスはミリ秒単位で動作するため、パフォーマンスの記録が数秒間しか続かない場合でも、位置がずれる可能性は十分にあります。
Chrome 122 では、パンくずリストを作成する機能が追加されました。この機能を使用すると、タイムラインの境界を固定して、設定した関心のあるエリア内でのみズームやパンを行えるようにできます。このようにタイムラインを制限すると、たとえば応答性の問題をデバッグする際に、1 回のインタラクションや問題のある長いタスクに集中できます。
上のスクリーンショットはタイムライン概要のクローズアップで、スクリプトの実行やプレゼンテーションなどのメインスレッドのアクティビティを可視化しています。ポインタをその上に置くと、タイムラインの境界を現在のウィンドウに設定する新しいボタンが表示されます。ボタンのラベルは、時間枠の幅（ミリ秒単位）と アイコンで表します。パンくずリストはタイムラインの概要の上に表示され、それぞれに時間枠のサイズのラベルが付けられます。
この機能を使用するには:
- タイムラインをズームして、関心のあるエリアに移動します。
- タイムラインの概要で虫メガネアイコン をクリックすると、タイムラインを固定してパンくずリストを設定できます。
- 必要に応じてこの操作を繰り返して、ネストされた対象領域を拡大します。
- パンくずリストをクリックすると、以前の関心のある領域、またはタイムライン全体に戻ることができます。
タイムラインをトリミングすると、誤ってタイムラインの範囲外までスクロールして、関連性のない部分に移動してしまうことがなくなります。必要に応じて、パンくずリストをクリックしてズームアウトできます。もう 1 つの利点は、タイムラインの概要が次のトラックと整合していることです。これにより、強制再フローなどのパフォーマンス改善の機会を簡単に見つけ、フレームグラフで根本原因を特定できます。
フレームチャートの無関係な部分を非表示にする
メインスレッドのアクティビティを分析するのは簡単ではありません。パフォーマンス パネルのこの部分は、コールスタックが長く細長くなるため、フレームグラフと呼ばれます。極端なケースでは、これらのスタックが非常に扱いにくく、全体を理解して最適化しようとしているものに集中することが困難になることもあります。
Chrome 124 以降では、炎グラフで非表示にするエントリを正確にカスタマイズできるため、最も実用的な情報に集中できます。
<ph type="x-smartling-placeholder">
フレームグラフで関数を右クリックすると、エントリを非表示にするいくつかのオプションを含むコンテキスト メニューが表示されます。
- 関数を非表示: 選択した関数をフレームチャートから削除します。その子は上に移動し、親関数の直後に表示されます。
- 子を非表示: 選択した関数のフレームチャートをプルーニングし、そのすべての子を非表示にします。
- 繰り返しの子を非表示: 選択した関数のすべてのインスタンスをフレーム チャートの残りの部分から削除します。
関数を選択したときに使用できる便利なキーボード ショートカットもいくつかあります。
- H: 選択した関数を非表示
- C: 選択した関数の子を非表示にする
- R: 選択した関数のスタック内の後続のインスタンスを非表示にします。
- U: 選択した関数の非表示の子要素を表示します。
無関係なスクリプトを完全に非表示にする
[無視リストにスクリプトを追加] オプションを選択すると、選択した関数と、同じスクリプト ファイル内で定義されている他のすべての関数がフレームグラフから非表示になります。スクリプトは無視リストにも追加されます。このリストは、DevTools デバッガが関数をステップオーバーし、スクリプトから発生した例外を無視するために使用されます。
無視リストに追加したスクリプトは保持されるため、新しいトレースではフレームチャートから引き続き非表示になります。管理対象外のスクリプトは、無視リストに登録する候補として適しています。一方、個々の関数の非表示は現在のトレースに対して一時的なものであり、状況に応じて異なります。たとえば、トレースを扱いやすくするために、再帰関数呼び出しの煩雑なスタックを非表示にできます。
無視リストやその他の非表示の関数を炎グラフに戻すには、コンテキスト メニューを使用して、選択した関数の子関数をリセットするか、トレース全体で非表示の関数をすべてリセットします。子が非表示の関数には ▼ アイコンが付けられます。このアイコンをクリックすると、子もリセットされます。
不必要に奥行きや複雑な部分を消すと、フレーム チャートがさらに使いやすくなります。必要に応じて、表示するエントリをカスタマイズできるようにすることで、目の前のタスクの最も重要な情報に集中できるように人間工学的に改善されています。
無関係なトラックを非表示にする
メインスレッド アクティビティは、[パフォーマンス] パネルの 1 つのトラックのみを構成します。[パフォーマンス] パネルのトラックはプロセスのアクティビティを可視化し、デバッグに役立つようにすべて共通のタイムラインに沿って配置されています。[メイン] トラックに加えて、ページで使用される他のサブフレーム、スレッド、ワーカーの個々のトラック、および [ネットワーク]、[フレーム]、[アニメーション]、[インタラクション] トラックがあります。さらに多くのトラックが、IO、GPU、Compositor などの下位レベルの Chrome プロセスのアクティビティをマークします。多数の情報が含まれています。しかし、ほとんどのパフォーマンスのワークフローでは、一度に確認する必要があるのはいくつかのトラックの情報のみです。
Chrome 125 以降では、不要なトラックを非表示にしたり、好みに合わせて並べ替えたりできる新しい設定モードが追加されています。たとえば、遅いインタラクションを最適化する場合は、Interactions、Main、GPU の各トラックを除くすべてを非表示にできます。
<ph type="x-smartling-placeholder">
トラックを編集するには、トラックの名前を右クリックして、[トラックを設定...] を選択します。設定モードが開き、個々のトラックの表示、非表示、並べ替えを行うことができます。[トラックの設定を完了] ボタンをクリックして設定を保存します。
<ph type="x-smartling-placeholder">トラックを設定すると、パフォーマンス パネルで重要な情報をワークフローに表示する方法が制御できます。これらの設定を使用すると、無関係なプロセスからアクティビティを非表示にしたり、必要なデータに簡単にアクセスできるようにトラックを移動したりできます。
まとめ
これら 3 つの機能では、人間工学に基づいた強力な制御を使用して、パフォーマンスのワークフローをカスタマイズできます。これらの機能を使用してノイズの量を減らすことで、目的のデータを簡単に見つけ、データを分析できるようになります。
よかった点や改善のご提案がありましたら、ぜひお聞かせください。ご質問や一般的なフィードバックがございましたら、@ChromeDevTools までご連絡ください。機能が動作しない、または新機能の提案がある場合は、こちらのオープン エスカレーションにコメントを残してください。
これは、Chrome のパフォーマンス ツールの改善に向けた取り組みの始まりにすぎません。パフォーマンス パネルをより使いやすく、かつ強力なものにするために、現在進行中の他の取り組みについてもお知らせいたします。次回のブログ投稿では、次の一連の機能をご紹介します。この投稿は、Chrome for Developers ブログで公開されます。それまでは、Chrome の新機能のページで、DevTools や Chrome の最新情報をご確認ください。