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