Chrome Developer Tools: Put JavaScript memory under control

Friday, May 27, 2011

Labels:

Modern web applications are becoming increasingly complex. To achieve functionality previously only available in desktop applications, they often comprise many frameworks glued together. As a result, memory usage by an application can grow unexpectedly. That’s why it is important to keep memory usage under control from the moment you start building it. In this post, we will cover four tools in Google Chrome that can help you understand how your application makes use of JavaScript memory.
The simplest one is the built-in Task Manager. It is available under > Tools > Task Manager. The “JavaScript memory” column isn't visible by default, but you can turn it on via the context menu [1]:


The numbers are updated in the real time.

If you’d like to visualise memory usage over time, try the Memory Graph of Chrome Developer Tools’ Timeline panel. To start using it, open Developer Tools, switch to the Timeline panel, and click on the “Memory” item. After you start capturing Timeline events, the graph starts updating itself:



The most functional tool in controlling JavaScript memory usage and finding leaks is the new powerful Heap Profiler available in Chrome Dev Channel. To get a heap snapshot, open the Profiles panel in Developer Tools and press the “Take heap snapshot” button:


Snapshots contain every object from the JavaScript heap, so you can explore them in detail and find out how much memory every object of your application consumes. The heap profiler also offers the following features:
  • snapshots diffing
  • grouping objects by constructor
  • calculating retained sizes of objects
  • showing dominators tree
  • revealing paths to GC roots or window objects
In addition, the heap profiler takes into account native DOM nodes, and allows you to uncover DOM-related memory leaks.

It is also possible to measure how much JavaScript memory is currently used from within the page itself. You can sample values from the performance.memory window property at different points of your application lifetime. Please note, that the property does not report anything, unless you run Chrome with --enable-memory-info command-line argument.

For a more complete reference on working with the Chrome Developer Tools heap profiler, check out the tutorial.



[1]: How to invoke the context menu in the Chrome Task Manager:
  • Windows: Right click on any part of the grid;
  • Linux: Right click on the grid itself;
  • Mac: Ctrl+Right click on column headers

Post a Comment