Missing calls in the Chrome devtools js flamechart

Question

Last time I was doing optimizations (maybe a year ago), I was able to see all possible function calls in the js flamechart.

Now, however, it doesn't seem to go all the way.

Here's a long running function:

I'm expecting way more sub-calls so that I may understand why is it running so long.

Here's how that function looks like:

function updateIfNeeded() {
  switch (state) {
    case 'NO_REQUEST':
      throw new Error('Unexpected draw callback.\n' + 'Please report this to <https://github.com/elm-lang/virtual-dom/issues>.');


    case 'PENDING_REQUEST':
      rAF(updateIfNeeded);
      state = 'EXTRA_REQUEST';


      var nextNode = view(nextModel);
      var patches = diff(currNode, nextNode);
      domNode = applyPatches(domNode, currNode, patches, eventNode);
      currNode = nextNode;


      return;


    case 'EXTRA_REQUEST':
      state = 'NO_REQUEST';
      return;
  }
}

It's part of the elm-runtime.

Now, while it is possible that this function might not call any other functions, it would not explain why it's running for so long.

Where is the button for my complete flamechart :}

I have a feeling that too fast-executed methods are just not sampled in the flames — Katya Pavlenko, Oct 14 '21 at 12:47
Instead of the "Performance" tab, click on the triple-dot in the top right > "More tools" > "JavaScript Profiler". See [this question](https://stackoverflow.com/q/54649976) — Boris Verkhovskiy, Feb 12 '23 at 17:03

score 1 · Accepted Answer · answered Dec 11 '19 at 21:24

The Performance panel has a Disable JavaScript Samples checkbox in the capture settings menu.

When this checkbox is enabled, the timeline only shows the yellow placeholders to differentiate between script execution time and, layout, paint and composite activity. Notice how the Cog/Settings Icon is red when the checkbox is enabled.

When the checkbox is not checked, the timeline shows the flame chart. When all the capture options are in their default state, the Cog/Settings Icon is blue while the menu is open and grey when the menu is closed/collaped.

Unfortunately it is not possible to be certain that this was the exact issue that you encountered, as the shared screenshot doesn't depict the capture settings. Hopefully this knowledge proves valuable should you encounter the same behaviour in the future.

Missing calls in the Chrome devtools js flamechart

1 Answers1