Debugging Memory Leak With Chrome Dev Tools

[mike.m...@gmail.com]

So I have an app, that after loading, polls every 30 seconds (using Ben Alman's doTimeout plugin). 

I have noticed that as I let the app run, the memory consumption slowly increases. Periodically garbage collection will run, do its thing, and drop the memory usage down pretty much back to where it started. But completely there. I believe I have a leak and am trying to use the Chrome Dev Tools to find and fix.

I have searched the web a bunch reading a bunch of how-to's and just finished reading Addy's new post "Taming the Unicorn". This is a great post, but I still have a bunch of questions.

My app is kinda like a dashboard where you can just let it sit there and view it. The action that is causing the leak in the polling. Well probably not the polling (I don't think it's the doTimeout plugin), but the execution of the code when the timer pops. It goes back to the server, fetches fresh data and updates the display. 

This app is actually built on top of the CanJS framework and uses its built-in live binding for automatic DOM updates. 

But back to the memory leak. Despite Addy's post, I still can't figure out how I am supposed to trace what I see in a heap snapshot back to the source of the leak within my code.

I executed the method of taking 3 heap snapshots. One when I load the page, one after the poller pops once and then the third after it poller pops again. Then I look at the third snapshot in summary view and change the "All Object" dropdown to "Objects allocated between snapshots 1 and 2".

The resulting view is not empty. Does this mean that I definitely have a leak?

Here is what I am seeing.

In (system) is see lots of "system / Map", "system / Context" and "system / JSGlobalPropertyCell" 

Objects in (compiled code) grows. This has the largest retained size. Is this a problem/leak? When I drill down I see stuff like "relocation_info" and "deoptimization_data" What is that stuff?

Then under (array) I see a bunch of entries such as "(object elements)[]" and "(object properties)[]" and "(code relocation info)[]" What is all of this?

Under Object all of the entries look something like this "@347167". What is this about? How do I trace this?

In (closure) I see a bunch of function() entries

I just seeing a lot of stuff and I don't understand how to trace it back to the source.

Sorry for the long post and thanks in advance.

[volkan....@gmail.com]

> In (system) is see lots of "system / Map", "system / Context" and "system / JSGlobalPropertyCell" 

Hi Mike,

TL;DR:

It's the "yellow" nodes that are important.

if all you see is "red" then don't panic [1] ;)

From my test code it appears that "system / Context" is due to an internal `safeFragment` object that jQuery uses internally.

I also see that all of the jQuery internal helper functions (like Animation and Tween) also close over to this variable in their

context (using jQuery v1.9.1).

Your setup might be different. And if there's not a solid retain path from one of your objects to that "sytem / context' or 

"sytem / map" item, then most probably it's an intermediate bookkeeper/helper object that you should not care about

 (and even if you did care about it, since you cannot reach it from anywhere starting from the "root" 

(window) object, then there's nothing you can do)

You might want to "force garbage collect" (the recycle bin icon in timeline panel) "clear the console" (because 

logging objects in console will be seen as memory leaks in the heap profiler, too) and then take another snapshot

and see if anything changes.

Actually you should do any profiling with only a single browser tab open (i.e. do not look at mails in another tab, and profile at the same time)

in incognito mode, and without any plugins and addons, to have reliable outcomes.

The "system / context" items are added in the 

`HeapEntry* V8HeapExplorer::AddEntry(HeapObject* object)` 

method of the V8 heap snapshot generator.

(see [2] for a complete source code)

[1] http://en.wikipedia.org/wiki/Don%27t_Panic_(The_Hitchhiker%27s_Guide_to_the_Galaxy)#Don.27t_Panic

[2] http://v8.googlecode.com/svn-history/r14033/trunk/src/heap-snapshot-generator.cc 

HTH,

Volkan Ozcelik,

http://o2js.com/

J4V45cR1p7 h4x0R