Measuring memory usage of a web page

Question

I'm trying to measure the memory usage of my site with the memory section of the Timeline tab in Chrome developer tools.

At various points I hit the garbage can button to force a garbage collection. The problem is the graph suddenly goes limp, and stops all measurements. Eventually, after I start doing other things it starts measuring again, but I never see the exact spot / value on the graph where I hit the GC button.

The first two downward slopes start immediately after I hit the garbage collect button, and they later just sort of connect to a new current value after I've been working.

Question is:

Is there a way to force this graph to keep or start measuring? Alternately, is there a simple way in JavaScript to console.log the current memory usage value?

As a related question, is there a way to point to a spot on the graph and see the exact memory usage at that point?

Answer 1

Timeline records events that happen on the renderer side. Each event record also has "memory usage" field. Timeline uses these numbers for the memory graph. So if there are no events for a time interval then memory graph shows nothing.

From the other side if renderer does nothing then the memory size doesn't change.

If you absolutely sure that you need memory data then you can setup a timer that does nothing.

For example you can execute in console setInterval(function() {}, 1000); In that case Timeline will get timer event with the memory usage data and will draw the memory graph.