Put JavaScript Memory Under Control Using Chrome Developer Tools

This post talks about Google Chrome tools that can help you understand how your application makes use of JavaScript memory.First one is the built-in Task Manager, available under > Tools > Task Manager. The "JavaScript memory" column isn't visible by default, but you can turn it on via the context menu.The numbers are updated in […]

This post talks about Google Chrome tools that can help you understand how your application makes use of JavaScript memory.

  1. First one is the built-in Task Manager, available under > Tools > Task Manager. The "JavaScript memory" column isn't visible by default, but you can turn it on via the context menu.

    The numbers are updated in the real time:

  2. To visualise memory usage over time, try "Memory Graph" of Chrome Developer Tools' Timeline panel. "Open Developer Tools, switch to Timeline panel, and click "Memory" item." After you start capturing Timeline events, the graph starts updating itself:

  3. Heap Profiler available in Chrome Dev Channel help you finding leaks. 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.

[Source:Chromium blog]