Chrome Developer Tools Profiler showing different method calls vs console.log
I am using the Profiles tab in Dev Tools in Chrome. In the profile I see an entry for a function resizeDocument
called 6+ times with values 113ms, 17ms, 45ms, etc. Etc. One line number, same file, same.
When I log out of the console inside a function resizeDocument
, I only get one entry. What's happening?
source to share
The reason for this is the nature of the processor profiler in chrome. This is a sampling profiler. Thus, it collects the call stacks (samples) of the running program and uses them to restore the columns in a diagram.
For example, if the profiler collected 1000 samples with one call frame for the "foo" function in each example, you would see a 1-long line named "foo" in it.
It may be that the profiler is unable to collect the next stack trace. For example, this happens when the profiler tries to collect call frames from the stack at a time when the function "foo" is called the function "bar" just before the sample. At this point, immediately after the call command, the "bar" function creates a call frame for "foo" on the stack. Thus, the call frames on the stack are currently in an invalid state. The profiler detects this and discards the sample. As a result, the break occurs in the sequence of stack traces.
In this case, two different stripes will be drawn for "foo".
There are also several other reasons why the profiler is unable to collect the call stack.
source to share