概要
パフォーマンス トレースを記録して分析したら、アイテム(Gemini で)や期間にアノテーションを付け、接続を作成できます。検出結果を同僚と共有したり、アノテーション付きのトレースをアップロードして検査したりできます。
パフォーマンス トレース内のアイテムにアノテーションを付ける
録音にアノテーションを付けるには、[パフォーマンス] パネルの左側にある
サイドバーで [アノテーション] タブを開きます。アノテーションを追加する方法はいくつかあります。- アイテムにラベルを付ける: アイテムにラベルを付けるには、アイテムをダブルクリックしてラベルを入力します。
- 2 つの項目を接続する: 2 つの項目を矢印で接続するには、最初の項目をダブルクリックし、その横にある矢印をクリックしてから、2 番目の項目をクリックします。
- 期間にラベルを付ける: 任意の期間にラベルを付けるには、期間の開始から終了まで Shift キーを押しながらドラッグし、ラベルを入力します。
この例の [ネットワーク] トラックには、2 つのアノテーション付きリクエスト、それらの間の接続、アノテーション付きの期間(ピンクでハイライト表示)があります。[アノテーション] タブには、タブ名の横にアノテーションの数が表示されます(この例では 4 個)。
Gemini でメイントラックのアノテーションを生成する
名前を付けるのは難しいものです。DevTools では、Gemini を使用して、コンテキストに基づいて [Main] トラックにラベル名を提案できます。
この機能を初めて使用する際は、
次の画面が表示されます。AI が常に正しい結果を出すとは限らないこと、AI は必要なトレースデータを Google に送信して分析し、推奨事項を生成すること、この機能は [設定] タブで管理できることが説明されます。
![アノテーションの考慮事項プロンプトには、AI が常に正しい結果を返すとは限らないこと、AI は必要なトレースデータを Google に送信して分析し、候補を提示すること、この機能は [設定] タブで管理できることが記載されています。](https://chrome-dot-google-developers.gonglchuangl.net/static/docs/devtools/performance/annotations/image/auto-annotations-considerations.png?hl=ja)
承認されると、Gemini にラベルの生成を依頼できるようになります。
ラベルを生成するには、トレース内の [Main track] アイテムのいずれかをダブルクリックし、入力フィールドの横にある [Generate label] をクリックします。Gemini は、スタック トレースに基づいてラベルを提案できます。
候補のテキストは必要に応じて調整できます。
生成されたアノテーションはすべて [アノテーション] タブに追加されます。
アノテーションを削除または非表示にする
アノテーションを削除するには、[アノテーション] タブでアノテーションにカーソルを合わせ、その横にある
アイコン 削除ボタンをクリックします。または、アノテーションをダブルクリックして編集し、テキストを削除します。または、右クリック コンテキスト メニューを使用します。パフォーマンス トレースからアノテーションを非表示にするには、[アノテーション] タブの下部にある [アノテーションを非表示にする]
をオンにします。録音を保存して共有する
録画を保存して、後でアノテーションを付けたパフォーマンス検出結果と共有するには、[パフォーマンス] パネルの上部にあるアクションバーで、
アイコン ダウンロードをクリックし、[トレースを保存] を選択します。または、[アノテーションなしでトレースを保存] を選択します。
録音を読み込む
アノテーション付きまたはアノテーションなしの録音を読み込むには、[パフォーマンス] パネルの上部にあるアクションバーの [
] アップロードをクリックします。トレース内にアノテーションが存在する場合は、[パフォーマンス] パネルに表示されます。