Sofia Emelianova

Barry Pollard

Overview

Once you haverecorded a performance trace andanalyzed it, you can annotate items (with Gemini), time ranges, and create connections. Then, you can share your findings with your colleagues or upload their annotated traces to inspect.

Annotate items in the performance trace

To annotate a recording, open theAnnotations tab in theleft_panel_open sidebar on the left of thePerformance panel. There are several ways to add an annotation:

• Label item: To add a label to an item, double-click it and type a label.
• Connect two items: To connect two items with an arrow, double-click the first item, click an arrow next to it, then click the second item.
• Label a time range: To label an arbitrary time range, shift-drag from the start of a time range to its end, then type a label.

In this example, in theNetwork track, there are two annotated requests, a connection between them, and an annotated time range highlighted in pink. TheAnnotations tab shows the number of annotations next to its tab name, in this example, 4.

Generate annotations for Main track with Gemini

Naming things is hard! DevTools can use Gemini to suggest a label name in theMain track based on the context.

When you use this feature for the first time...

You will see the following screen that explains that AI may not always get things right, that the AI works by sending the necessary trace data to Google to analyse and make the suggestion, and that you can control this feature in the settings tab.

Once that's accepted, you can now ask Gemini to generate a label.

Note: Auto annotations are subject to thesame requirements as other AI features and can becontrolled through policy.

To generate a label, double-click on one of theMain track items in the trace, then clickGenerate label next to the input field. Gemini can suggest a label based on the stack trace.

You can tweak the suggested text as you see fit.

All generated annotations are added to theAnnotations tab.

Remove or hide annotations

To delete an annotation, hover over it in theAnnotations tab and click thedeleteDelete button next to it. Alternatively, edit the annotation by double-clicking it and delete the text. Or use the right-click context menu.

To hide annotations from the performance trace, checkcheck_boxHide annotations at the bottom of theAnnotations tab.

Save and share a recording

Annotations can be saved in performance traces for sharing. Traces can also be saved without annotations if preferred.

For more details on saving performance traces, seeSave performance traces.

Load a recording

To load an annotated (or not) recording, clickuploadUpload in the action bar at the top of thePerformance panel.

ThePerformance panel will show annotations if they are present in the trace.