パフォーマンス パネルで直接トレースにアノテーションを付ける

Alina Varkki

公開日: 2024 年 11 月 13 日

パフォーマンス トレースを調べて、最も長いタスクや不要な作業のチャンクなど、特定の領域をハイライト表示したいとします。今後の参考のためにメモを残したり、調査結果を同僚と共有したりしたい場合などです。そのための最適な方法は次のうちどれですか。

当然、トレース結果を大きな紙に印刷して手書きでメモを書き込むか、サードパーティ製ソフトウェアを使用してトレース結果のスクリーンショットにメモを描画します。（ただし、これまではこれが最善の方法でした）。

開発者のワークフローを効率化するために、これらのオプションに代わる方法として、[パフォーマンス] パネル内でトレースにアノテーションを直接追加する機能を導入しました。

これで、トレースにアノテーションを付け、アノテーションを簡単に移動し、トレース ファイル内に直接保存できるようになりました。これにより、ハイライト表示された分析情報をファイルの送信と同じくらい簡単に共有でき、外部ツールや回避策の必要がなくなります。アノテーションは、パフォーマンスのデバッグに役立つだけでなく、同僚とすぐに同じページに立ち、やり取りを減らして状況を理解しやすくします。

アノテーションには次の 3 種類があります。

1. アノテーション付きの期間: タイムライン内の任意の期間にラベルを付ける

2. アノテーション付きのエントリ: タイムライン内のエントリにラベルを追加する

3. エントリの接続: 2 つのエントリを矢印で接続して、関係を示します。

各タイプのアノテーションと、それらが役立つシナリオについて見てみましょう。

アノテーション付きの期間

DevTools の一般的なワークフローは、トレース記録して操作の遅延をデバッグすることです。トレースビューは最初は圧倒されるかもしれませんが、特定のイベント ハンドラと呼び出しスタックをドリルダウンすると、理解できるようになります。トレースビューをより簡単に操作できるようにするには、通常の作業時間にラベルを付けるアノテーションを作成します。たとえば、ユーザー操作後に UI を有意に更新するために、期間にアノテーションを付けると便利です。

期間にアノテーションを付けるには: Shift キーを押しながら、インタラクションの開始から UI の更新までドラッグします。次に、ラベルを入力してアノテーションを作成します。選択した範囲が正しくない場合は、クリックしてキャンセルしてから入力します。アノテーションのラベルを編集するには、アノテーションをダブルクリックします。現時点では、既存のアノテーションの時間範囲を調整することはできません。期間が正しくない場合は、アノテーションを削除して新しいアノテーションを作成します。

このアノテーションを使用すると、ユーザーに表示される変更の前に行う必要があるすべての作業を明確に把握できるため、それに応じてデバッグに集中できます。

アノテーション付きのエントリ

ユーザーに表示される変更をより明確にするために、遷移を担当するタスクにエントリラベルをアノテーションすることもできます。

エントリにラベルを付けるには: 選択したエントリをダブルクリックしてラベルを入力するか、エントリを右クリックしてコンテキスト メニューから [エントリにラベルを付ける] を選択します。アノテーションのラベルを編集するには、エントリまたはラベルをダブルクリックします。または、コンテキスト メニューから [ラベルの入力] オプションを選択します。

これらのエントリ アノテーションを使用すると、インタラクションに不可欠な作業（またはそうでない作業）と、その作業にかかる時間を簡単に見つけることができます。

エントリ接続

トレースにアノテーションを付ける 3 つ目の方法は、インタラクションと遷移の原因となる長いタスクの間に接続を描画することです。

エントリ間の接続を作成するには: 別のエントリに接続するエントリをダブルクリックし、そのエントリの右側に表示される矢印をクリックします。次に、接続するエントリをクリックします。または、エントリを右クリックして、エントリのコンテキスト メニューから [エントリをリンク] を選択します。

そのため、インタラクション自体は終了していても、このタイプのアノテーションを使用すると、最終的に UI をブロックする後続の長いタスクとどのように関連しているかをより明確に示せます。

アノテーションを削除、非表示にする

サイドバーのアノテーション リストビューから、すべてのアノテーションをすばやく削除できます。アノテーションにカーソルを合わせると、ゴミ箱アイコン delete が表示されます。このアイコンをクリックすると、アノテーションが削除されます。

特定のイベントに関連付けられているエントリラベルとエントリ接続アノテーションを削除するには、イベントを右クリックして [アノテーションを削除] を選択します。ラベル付きのアノテーションは、ラベルを削除してアノテーションを保存することで削除することもできます。

アノテーションを削除せずに非表示にして、トレースの確認を妨げないようにするには、アノテーション サイドバーの下部にある [アノテーションを非表示にする] チェックボックスをオンにします。この設定は保存されます。この設定が有効になっているときにアノテーションを含むトレースを読み込むと、チェックボックスをオフにするまでアノテーションは非表示のままになります。

アノテーション付きのトレースを保存または読み込む

これで、自分自身や他のユーザーがトレースの内容を把握しやすくなるように、アノテーションをすべて追加できました。次のステップ

アノテーションが導入される前のように、トレースのスナップショットを撮って同僚に送信する必要はありません。アノテーションを付けたファイルを保存して、そのファイルを送信するだけです。これで完了です。お客様は、ファイルを [パフォーマンス] パネルにアップロードして、トレースのコンテキストで作成したアノテーションをすべて確認できます。また、アノテーションを追加して、お客様に送り返すこともできます。

DevTools では、他の種類のカスタマイズもトレースビューに保存されます。たとえば、ズームインしてパンくずリストを設定することで、関心のある領域を分離したり、関連性のない呼び出しスタック内のエントリを非表示にしたりできます。これらの設定はすべてトレース ファイルによって保持されるため、パフォーマンスのデバッグでコラボレーションがさらに容易になります。これらのカスタマイズにより、スクリーンショットとは異なり、インタラクティブなトレース全体のコンテキストを提供しながら、最も重要な部分に注意を向けることができます。

アノテーションやその他のカスタマイズを保持するには、ダウンロード アイコン download の下にある [トレース情報を保存] オプションをクリックします。トレースには、これらのカスタマイズがすべて含まれます。アノテーション付きで保存するのがデフォルトですが、未加工のトレース ファイルのみを保存する場合は、[アノテーションなしでトレースを保存] オプションを選択します。

まとめ

たくさんの情報を理解しなければならないように思えるかもしれませんが、ご安心ください。アノテーションの作成手順は、[パフォーマンス] パネルのサイドバーにある [アノテーション] タブでいつでも確認できます。このタブには、アノテーションが存在しない場合の手順が表示され、アノテーションが作成されると、アノテーションのリストビューが表示されます。

同様に、[パフォーマンス] パネルのアノテーションを使用すると、デベロッパーはトレースの重要な部分を特定し、パーソナライズされたコンテキストと分析情報を追加できます。これにより、分析プロセスが効率化され、パフォーマンスの最適化に関する共有とコラボレーションが容易になります。パフォーマンス パネルのアノテーションをお試しいただき、ご感想をお聞かせください。フィードバックがございましたら、公開されている問題のコメント欄でお知らせください。

外部ツールの必要性を解消し、より効率的なワークフローを実現しましょう。