20

I have a web application which has a memory leak somewhere and I am unable to detect it. I already tried the Chrome developer tools which normally works great, but I am unable to track down the lines of code which are responsible. The Chrome tools just give me too much information and I can't relate the objects in memory to my code.

Are there any other tools that might be helpful?

Elzo Valugi
  • 27,240
  • 15
  • 95
  • 114
Preli
  • 2,953
  • 10
  • 37
  • 50
  • possible duplicate of [Tools for debugging memory leaks in JavaScript](http://stackoverflow.com/questions/3573252/tools-for-debugging-memory-leaks-in-javascript) – CD.. Aug 15 '12 at 12:14

3 Answers3

27

update: Lets use Record Heap Allocations profile type.

  1. open devtools profiler
  2. do a warm-up action
  3. start profiler
  4. repeat action a few times
  5. if the action has a leak you will see the same number of groups of blue bars in the overview pane
  6. stop the profiler
  7. select one group of these blue bars in the overview
  8. look into the list of objects

See screencast Javascript Memory Leak detection (Chrome DevTools)

was: You can use the next scenario for fining memory leaks.

  1. open devtools profiler
  2. do an action that makes a leak
  3. take a heap snapshot
  4. repeat steps 2 and 3 tree times
  5. select the latest heap snapshot
  6. change filter "All Object" to "Objects between Snapshot 1 and 2"

After that you will see objects a set of leaked objects. You can select an object and look at the list of retainers in Object's retaining tree

loislo
  • 14,025
  • 1
  • 28
  • 24
  • 1
    Usually you just know who adds the leaked objects to a container because it is your code. But if you don't know that, then you could override the constructor with new one for the leaked object class which records the stack trace and calls the original one, right from the console. Repeat these steps and look into the object for the allocation stack trace. It could give you a clue what was the source of the leaked object and which code should remove the last reverence to the leaked object. – loislo Apr 14 '13 at 08:02
2

Use the innerHTML and outerHTML values of the element in the Detached DOM tree view of the Heap Profiler to map objects in memory to your code and track down memory leaks.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • jQuery ajax requests were the biggest culprit in my app. Locate all your ajax jQuery functions: .ajax(), .get(), .post() and content setters: .html(), .text(). Go to the network tab in dev tools, refresh the current page 10 to 20 times. I resolved a recent memory leak with jQuery.load() inside my one page JS app... `if(!jQuery.terms_html) $('#tc_container').load(STATIC_DOMAIN + '/terms.html', function() { jQuery.terms_html = $('#tc_container').html() }) else $('#tc_container').html(jQuery.terms_html)` – buycanna.io Feb 21 '18 at 07:57
0

jQuery ajax requests were the biggest culprit in my app. Locate all your ajax jQuery functions: .ajax(), .get(), .post() and content setters: .html(), .text().

Go to the network tab in dev tools, refresh the current page 10 to 20 times. If you see things stacking up too frequently, or calls not being completed, you have a memory leak.

Here is a recent memory leak I was able to solve with jQuery.load()...

if(!jQuery.terms_html) $('#tc_container').load(STATIC_DOMAIN + '/terms.html', function() { jQuery.terms_html = $('#tc_container').html() }) else $('#tc_container').html(jQuery.terms_html)

Also, the latest version of jQuery at time of writing this is 3.3.1. Having the latest version installed is the best way to get started, if possible. https://github.com/jquery/jquery/releases

buycanna.io
  • 1,166
  • 16
  • 18