Navigating the Call Graph

By Fabien Potencier, on Apr 17, 2015

A few weeks ago, we decided to remove all the options from the profile call graph UI. But I failed to explain why the removal was a good thing because I did not mentioned how to navigate the call graph “the right way”. So, our support team immediately started to receive some complaints from developers who were not able to easily dive into the call graph as before anymore.

If the new UI was intuitive, and we thought it was, explanations would not have been necessary. We fixed the experience in the new release of the UI and focusing on a node is now more discoverable. Let me show you what I mean.

When vizualizing a call graph, Blackfire only displays the most relevant nodes on the screen. It makes it easier to spot performance bottlenecks. Here, you can see that theApcClassLoader::loadClass() node is the most significant one:

blackfire-focus-1

Then, you can click on the node to get more information about the callers and the callees on the left side of the screen:

blackfire-focus-2

But then, how can you focus on this specific node to learn more about all its callers and all its callees? When the options were available, you would have had to tweak different options to find the right levels. Not anymore. Notice the magnifying glass on the node and in the table on the left? Click on it and done:

blackfire-focus-3

Now, the call graph displays all the nodes related to the one you’ve just selected, no matter how complex the graph is. We tested this behavior on many different call graphs and it almost always gave better results than manual option tweaks.

Happy profiling!

Fabien Potencier

Fabien Potencier is the CEO and founder of Blackfire.io. He founded the Symfony project in 2004 as he constantly looked for better ways to build websites. Fabien is also the creator of several other Open-Source projects, a writer, a blogger, a speaker at international conferences, and the happy father of two wonderful kids.