Navigate the Performance Profile Timeline in Chrome DevTools

This video will teach you about the nuances of navigating the performance profile's timeline.

The timeline is a mini-map representation of all the activity that happened during a profile recording. It shows basic visualizations to recognize the nature of the activity. We can zoom in and out of the profile using the mouse scroll. You can also use the bookends to drag and select the zoom area.

All of the areas below the timeline is used to show detailed information on the zoomed-in section of the profile.

The summary box at the bottom shows the third level of detail when you select an artifact on the rest of the profile.

The second half of the profile is divided into various sections. Most prominent are the network and main thread sections.

In the network section, we see a waterfall diagram of all the network calls that were made and how long it took. On clicking a specific network bar, we see more info about it in the summary box.

In the main thread sections, we see a detail of all the activity of the browser's main thread in the form of a flame chart. Each bar on a flame chart is a function call. You can click on it and see its origin and timing details on the summary box.