Figure 7 and Figure 8 show the difference between disabling and enabling
JavaScript samples. The Main section of the recording is much shorter
when sampling is disabled, because it omits all of the JavaScript call stacks.

Figure 7. An example of a recording when JS samples are disabled
Figure 8. An example of a recording when JS samples are enabled

Throttle the CPU while recording

Throttling is relative to your computer's capabilities. For example, the
2x slowdown option makes your CPU operate 2 times slower than its usual
ability. DevTools can't truly simulate the CPUs of mobile devices, because
the architecture of mobile devices is very different from that of desktops
and laptops.

Hover your mouse over the Overview section or the Details section.
The Overview section is the area containing the FPS, CPU, and
NET charts. The Details section is the area containing the Main
section, the Interactions section, and so on.

Using two fingers, swipe up to zoom out, swipe left to move left, swipe
down to zoom in, and swipe right to move right.

To scroll a long flame chart in the Main section or any of its neighbors,
click and hold while dragging up and down. Drag left and right to move what
portion of the recording is selected.

Search activities

Press Command+F (Mac) or
Control+F (Windows, Linux) to open the search box
at the bottom of the Performance panel.

Figure 13. Using regex in the search box at the bottom of the
window to find any activity that begins with `E`

To navigate activities that match your query:

Use the Previous and Next buttons.

Press Shift+Enter to select the previous or
Enter to select the next.

To modify query settings:

Press Case sensitive
to make the query case sensitive.

Press Regex to use a regular
expression in your query.

To hide the search box, press Cancel.

View main thread activity

Use the Main section to view activity that occurred on the page's main
thread.

Figure 14. The Main section, outlined in blue

Click on an event to view more information about it in the Summary tab.
DevTools outlines the selected event in blue.

Figure 15. More information about the Me function
call event in the Summary tab

DevTools represents main thread activity with a flame chart. The x-axis
represents the recording over time. The y-axis represents the call stack.
The events on top cause the events below it.

Figure 16. A flame chart in the Main section

In Figure 16, a click event caused a function call in script_foot_closure.js
on line 53. Below Function Call you see that an anonymous function was
called. That anonymous function then called Me(), which then called Se(),
and so on.

DevTools assigns scripts random colors. In Figure 16, function calls from
one script are colored light green. Calls from another script are colored
beige. The darker yellow represents scripting activity, and the purple
event represents rendering activity. These darker yellow and purple events
are consistent across all recordings.

See Disable JavaScript samples if you want to hide the
detailed flame chart of JavaScript calls. When JS samples are disabled,
you only see high-level events such as Event (click) and Function
Call (script_foot_closure.js:53) from Figure 16.

View activities in a table

After recording a page, you don't need to rely solely on the Main section
to analyze activities. DevTools also provides three tabular views for
analyzing activities. Each view gives you a different perspective on the
activities:

When you want to view the root activities that cause the most work, use the
Call Tree tab.

When you want to view the activities where the most time was directly spent,
use the Bottom-Up tab.

When you want to view the activities in the order in which they occurred
during the recording, use the Event Log tab.

Root activities

Root activities are those which cause the browser to do some work. For example,
when you click a page, the browser fires an Event activity
as the root activity. That Event might cause a handler to execute, and so on.

In the Main section's flame chart, root activities are at the top of the
chart. In the Call Tree and Event Log tabs, root activities are the
top-level items.

The Call Tree tab

The Call Tree tab only displays activities during the selected portion
of the recording. See Select a portion of a recording to learn
how to select portions.

Figure 17. The Call Tree tab

In Figure 17, the top-level of items in the Activity column, such as
Event, Paint, and Composite Layers are root activities. The nesting
represents the call stack. For example, in Figure 17, Event caused
Function Call, which caused button.addEventListener, which caused b,
and so on.

Self Time represents the time directly spent in that activity.
Total Time represents the time spent in that activity or any of its
children.

Click Self Time, Total Time, or Activity to sort the table by
that column.

Use the Filter text box to filter events by activity name.

By default the Grouping menu is set to No Grouping. Use the
Grouping menu to sort the activity table based on various criteria.

Click Show Heaviest Stack to reveal
another table to the right of the Activity table. Click on an activity to
populate the Heaviest Stack table. The Heaviest Stack table shows
you which children of the selected activity took the longest time to
execute.

The Bottom-Up tab

Use the Bottom-Up tab to view which activities directly took up the most
time in aggregate.

The Bottom-Up tab only displays activities during the selected portion
of the recording. See Select a portion of a recording to learn
how to select portions.

Figure 18. The Bottom-Up tab

In the Main section flame chart of Figure 18, you can see that almost
practically all of the time was spent executing the three calls to wait().
Accordingly, the top activity in the Bottom-Up tab of Figure 18 is
wait. In the flame chart of Figure 18, the yellow below the calls to wait
are actually thousands of Minor GC calls. Accordingly, you can see that
in the Bottom-Up tab, the next most expensive activity is Minor GC.

The Self Time column represents the aggregated time spent directly in
that activity, across all of its occurrences.

The Total Time column represents aggregated time spent in that activity
or any of its children.

The Event Log tab

Use the Event Log tab to view activities in the order in which they
occurred during the recording.

The Event Log tab only displays activities during the selected portion
of the recording. See Select a portion of a recording to learn
how to select portions.

Figure 19. The Event Log tab

The Start Time column represents the point at which that activity started,
relative to the start of the recording. For example, the start time of
1573.0 ms for the selected item in Figure 19 means that activity started
1573 ms after the recording started.

The Self Time column represents the time spent directly in that activity.

The Total Time columns represents time spent directly in that activity or
in any of its children.

Click Start Time, Self Time, or Total Time to sort the table by
that column.

Use the Filter text box to filter activities by name.

Use the Duration menu to filter out any activities that took less than
1 ms or 15 ms. By default the Duration menu is set to All, meaning
all activities are shown.

Disable the Loading, Scripting, Rendering, or Painting
checkboxes to filter out all activities from those categories.

View GPU activity

View GPU activity in the GPU section.

Figure 20. The GPU section, outlined in blue

View raster activity

View raster activity in the Raster section.

Figure 21. The Raster section, outlined in blue

View interactions

Use the Interactions section to find and analyze user interactions
that happened during the recording.

Figure 22. The Interactions section, outlined in blue

A red line at the bottom of an interaction represents time spent waiting
for the main thread.

Click an interaction to view more information about it in the Summary
tab.

Analyze frames per second (FPS)

DevTools provides numerous ways to analyze frames per second:

Use the FPS chart to get an overview of FPS over
the duration of the recording.

The FPS chart

The FPS chart provides an overview of the frame rate across the duration
of a recording. In general, the higher the green bar, the better the frame
rate.

A red bar above the FPS chart is a warning that the frame rate dropped
so low that it probably harmed the user's experience.
Figure 20. The FPS chart, outlined in blue

The Frames section

The Frames section tells you exactly how long a particular frame took.

Hover over a frame to view a tooltip with more information about it.

Figure 21. Hovering over a frame

Click on a frame to view even more information about the frame in the
Summary tab. DevTools outlines the selected frame in blue.

Figure 22. Viewing a frame in the Summary tab

View network requests

Expand the Network section to view a waterfall of network requests
that occurred during the recording.

Figure 23. The Network section, outlined in blue

Requests are color-coded as follows:

HTML: Blue

CSS: Purple

JS: Yellow

Images: Green

Click on a request to view more information about it in the Summary tab.
For example, in Figure 23 the Summary tab is displaying more information
about the blue request that's selected in the Network section.

A darker-blue square in the top-left of a request means it's a higher-priority
request. A lighter-blue square means lower-priority. For example, in Figure
23 the blue, selected request is higher-priority, and the green one above it
is lower-priority.

In Figure 24, the request for www.google.com is represented by a line on
the left, a bar in the middle with a dark portion and a light portion, and
a line on the right. Figure 25 shows the corresponding representation of the
same request in the Timing tab of the Network panel. Here's how
these two representations map to each other:

The left line is everything up to the Connection Start group of events,
inclusive. In other words, it's everything before Request Sent, exclusive.

The light portion of the bar is Request Sent and Waiting (TTFB).

The dark portion of the bar is Content Download.

The right line is essentially time spent waiting for the
main thread. This is not represented in the Timing tab.

Figure 24. The line-bar representation of the
www.google.com request
Figure 25. The Timing tab representation of the
www.google.com request

View memory metrics

Enable the Memory checkbox to view memory metrics from the last recording.

Figure 26. The Memory checkbox, outlined in blue

DevTools displays a new Memory chart, above the Summary tab. There's
also a new chart below the NET chart, called HEAP. The HEAP chart
provides the same information as the JS Heap line in the Memory chart.

Figure 27. Memory metrics, above the Summary tab

The colored lines on the chart map to the colored checkboxes above the chart.
Disable a checkbox to hide that category from the chart.

The chart only displays the region of the recording that is currently
selected. For example, in Figure 27, the Memory chart is only showing
memory usage for the start of the recording, up to around the 1000ms mark.

View the duration of a portion of a recording

When analyzing a section like Network or Main, sometimes you need a
more precise estimate of how long certain events took. Hold Shift,
click and hold, and drag left or right to select a portion of the recording.
At the bottom of your selection, DevTools shows how long that portion took.

Figure 28. The 488.53ms timestamp at the bottom
of the selected portion indicates how long that portion took

See the comments in debug_colors.cc for an explanation of the color-codings.

Find scroll performance issues in realtime

Use Scrolling Performance Issues to identify elements of the page that have
event listeners related to scrolling that may harm the performance of the page.
DevTools outlines the potentially-problematic elements in teal.