Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome DevTools Profiler

Searching for some memory leak in a Javascript application, I try to use the Chrome DevTools Profiler. Is there some detailed information describing all entries that might be found in it?

For example, after performing a simple "open homepage, open another page, return to homepage" and looking at the snapshots' comparison, I can find the line "(array)" which has a large objects count and interests me. When opening that node, I see thousands of lines like...

  • (script line ends)[] @89876
  • (transition array)[] @748323
  • (object properties)[] @77529
  • (map descriptors)[] @13823
  • (code relocation info)[] @722653
  • [] @748003
  • (object elements)[] @40917

Where can I read about that?

like image 938
mgs Avatar asked Sep 18 '13 11:09

mgs


People also ask

How do I use DevTools profiler on Chrome?

To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.

What is profiler in Chrome?

Profilers show us which functions take the most time. Let's make our baseline profile by switching to the “Profiles” tab in Chrome Developer Tools, where three types of profiling are offered: JavaScript CPU profile Shows how much CPU time our JavaScript is taking.


1 Answers

There are number of different v8 internal things in the heap that cannot be accessed from javascript.

As example (script line ends) is an array that have line end offsets for a script. v8 needs it for setting up a breakpoint.

Each time when you create an object, v8 does many things and allocates memory for them. See Lars Bak video about v8. http://www.youtube.com/watch?v=hWhMKalEicY

If you are interesting in the topic there are number of slides and presentations about v8 internals.

The simplest way to find a leak is to use "Record Heap Allocations" profile. It shows you a "realtime" chart with allocations.

you need to start the recording, repeat your scenario a few times and if the code has a leak then you will see the same number of blue vertical bars on the chart. So you should stop the recording and select the blue bar somewhere in the middle and see what objects it has.

the first blue bar is not interesting because it could have allocations that were made only once.

the last one also is not interesting because it might have allocations that will be released at the next repeat of your scenario.

So the best candidate is a bar in the middle. http://www.youtube.com/watch?v=x9Jlu_h_Lyw

The most interesting items are the objects that were created by your script.

like image 153
loislo Avatar answered Oct 10 '22 23:10

loislo