• 8 hours
  • Easy

Free online content available in this course.



Got it!

Last updated on 2/7/20


Log in or subscribe for free to enjoy all this course has to offer!

The Profiles tab is pretty advanced stuff! It lets you measure usage and memory issues in your app.

You can measure 3 different things.

  • CPU Profiler: Shows JavaScript execution time

  • Heap Profiler: Shows the distribution of memory for JavaScript objects and DOM nodes

  • Record Heap Allocations: Shows JavaScript object allocations (this can help you identify memory leaks)!

Here are these three options, laid out in the Profiles tab:

Profile options
Profile options

JavaScript CPU Profiler

Obviously, we will see many more results if we analyze a more complicated website such as the New York Times. Let's make a recording of refreshing the page (and we'll try to keep it short to avoid information overload).

Note immediately that you have multiple options to show the data:

View options
View options

No matter which view option you choose, you'll be able to view the execution time of the page's functions. Each line corresponds to a JavaScript action that was carried out and that consumed processor time. There's only one exception at the top: idle.


Chart view of CPU profile
Chart view of CPU profile

You can save a recording via the "Save" button next to the profile name.

Heap snapshot

Taking a heap profile allow you to understand where memory in the JavaScript heap is used. The result shows you memory distribution of your JavaScript objects, arranged by the constructor function that instantiated them.

There are also several different views here:

  • Summary: the default display of all objects in memory.

  • Comparison: if you made two brief profiles, you can compare them here (This feature can be handy if you want to test the difference before/after code changes).

  • Containment: tree view to see parents and children

  • Statistics: a graph that represents what type of data takes up memory (in percentage and absolute values)

  • Containment view
    Containment view
Statistics view
Statistics view

Record Heap

This is a fairly advanced tool that will record memory allocations over the span of a process to identify potential memory leaks.

The recording itself is not complicated to do. As usual, you start recording, perform some actions on the page, and then stop recording.

The views will be almost identical to the heap snapshots, but while a heap profile displays the memory allocated in general, record heap shows memory allocation over a time interval.

Example of certificate of achievement
Example of certificate of achievement