Tracking JavaScript Memory Usage in Google Chrome and the New Heap Profiler

For applications, the web is rapidly catching up to native environments in terms of capabilities and performance. Unfortunately, this also means an increase in the complexity of projects. With complexity, more bugs and issues are a given, so web developers need debugging tools just as powerful as those found in traditional IDEs.

Google is showcasing some of the ways web developers working with JavaScript can keep track of memory usage and memory leaks.

Since web apps are becoming increasingly powerful, their memory requirements grow as well and this can have an adverse impact on performance even on powerful modern machines.

The most obvious and simple way of keeping track of JavaScript memory usage is with the built-in Task Manager in Chrome. This understated but powerful tool lists all of the processes managed by Chrome along with their CPU and memory usage, by default.

However, more data columns can be added, just right click on the list and choose the data you want to see, among which is JavaScript memory. The numbers are updated in real time, so you can keep track as a process unfolds, though it's not the most scientific method.

A more powerful way of doing this is via the built-in Developer Tools. In the timeline section, you can start recording memory usage over time and then pour over the charts and events to see exactly what and when it's happening.

If you're using Chrome 13 in the dev channel, you'll also have access to a powerful new tool which enables you to take heap snapshots.

"The most functional tool in controlling JavaScript memory usage and finding leaks is the new powerful Heap Profiler available in Chrome Dev Channel," Mikhail Naganov, software engineer at Google, wrote.

"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," he explained.

You can take a heap snapshot by going to the Profiles panel and hitting the "Take heap snapshot" button, which looks like an eye, from the toolbar below.