Chrome Developer Tools Profiler showing different number of method calls vs console.log

Question

I'm using the Profiles tab of the Dev Tools in Chrome. In the profile, I'm seeing an entry for function resizeDocument called 6+ times, with values 113ms, 17ms, 45ms, etc etc. Same line number, same file, same everything.

When I log from the console inside resizeDocument function, I only get one entry. What is going on?

Answer 1

The reason of that is the nature of CPU profiler in chrome. It is a sampling profiler. So it collects call stacks (samples) of the running program and uses them for reconstructing the bars in the chart view.

For example if the profiler collected 1000 samples with one call frame for a function 'foo' in the each sample then you will see 1s long bar with 'foo' name in it.

It might happen that the profiler can't collect the next stack trace. For example it happens when the profiler tries to collect the call frames from the stack at a time when the function 'foo' called function 'bar' right before the sample. At this moment, right after call instruction, the function 'bar' constructs the call frame for 'foo' on the stack. So the call frames on the stack are in invalid state at the moment. The profiler detects that and drops the sample. As a result a gap happens in the sequence of stack traces.

In this case two different bars for 'foo' will be constructed.

Also there is a few other reasons when the profiler can't collect the call stack.