The Evolution of the Call Stack
Call Stacks are one of the most important tools in the debugger. They help answer the questions:
- how did we get here?
- 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:
- Highlighting libraries
- Simplifying Function Names
- Collapsing Library frames
- Naming Library frames
- Blackboxing libraries
Lets look at each feature in depth and see how we can improve a pretty simple Backbone call stack.
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.
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
It’s important to be able to scan the call stack. So in this context, it’s helpful to see the simplest name possible.
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.
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 [
event.dispatch], we can simply show
Describing the library functions will help make it clear when a framework is rendering, routing, or doing any other task.
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.
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.
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.
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!