Annotate and share your performance findings

Sofia Emelianova
Sofia Emelianova
Barry Pollard
Barry Pollard

Overview

Once you have recorded a performance trace and analyzed 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 the Annotations tab in the sidebar on the left of the Performance 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.

Annotations on a performance recording.

In this example, in the Network track, there are two annotated requests, a connection between them, and an annotated time range highlighted in pink. The Annotations 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 the Main 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.

Annotations considerations prompt explaining 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.
Auto annotation considerations prompt.

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

To generate a label, double-click on one of the Main track items in the trace, then click Generate 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 the Annotations tab.

Remove or hide annotations

To delete an annotation, hover over it in the Annotations tab and click the Delete 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, check Hide annotations at the bottom of the Annotations tab.

Save and share a recording

To save a recording and later share it with your annotated performance findings, in the action bar at the top of the Performance panel, click Download and select Save trace.

Save trace with annotations.

Alternatively, select Save trace without annotations.

Load a recording

To load an annotated (or not) recording, click Upload in the action bar at the top of the Performance panel.

Load trace button in the action bar.

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