The Evolution of the Call Stack

Call Stacks are one of the most important tools in the debugger. They help answer the questions:

  1. how did we get here?
  2. what happened over there?

Unfortunately, call stacks have become increasingly confusing over time to the point that they have become a feature that only the most advanced users take advantage of.

We have five features that will make the Call Stack a lot more usable:

evolution

Lets look at each feature in depth and see how we can improve a pretty simple Backbone call stack.

original

:diamond_shape_with_a_dot_inside: Highlighting libraries

We’re going to start highlighting library frames in the call stack. We’ll do this by replacing the file URL and line location with the library name and logo.

This will help users differentiate between application and library frames.

highlight

:envelope: Simplifying Anonymous Function Names

The call stack currently gives verbose function names to anonymous functions in the call stack. In practice, the function success could be named app.AppView<.success.

It’s important to be able to scan the call stack. So in this context, it’s helpful to see the simplest name possible.

simplify

:spaghetti: Collapsing Library frames

We’re going to experiment with collapsing library frames by default. This will shrink framework call stacks dramatically and reduce a lot of the visual noise.

collapse

:baby: Naming Library frames

One of the benefits of collapsing the library frames is that it gives an opportunity to describe what the library is doing. For example, instead of showing two frames for jQuery [elemData.handle, event.dispatch], we can simply show event.

Describing the library functions will help make it clear when a framework is rendering, routing, or doing any other task.

naming

:black_medium_small_square: Blackboxing libraries

Sometimes you want to ignore a library completely. When this is the case you’ll can blackbox the library and it will not show up in the call stack. We’ve always had this feature, but today it is more discoverable.

blackbox

React Case Study

We wanted to see what the new Call Stack would look like in a real world React application so we took a look at the Debugger while it was rendering the Call Stack.

inception

When you compare what the call stack that you see when you’re paused in a render cycle, the difference is striking. Here is what the call stack looked like before and after the change.

react

Conclusion

We’re really excited about how the new call stack will help users think about their applications in the future. This is just the beginning, we hope to introduce more framework improvements in the near future!