I just read about it on this post, and it’s currently available in the Canary build of Chrome. The jist is, by selecting the “async” checkbox beside the Call Stack UI under Sources in Chrome dev tools, it will capture not only the current call stack, but also allow you to trace through the call stack that causes that async call. AMAZING!
it’s so beautiful!
This will work with event listeners, setInterval, setTimeout, XMLHttpRequests, requestAnimationFrame, MutationObservers, and more. What’s better, is that you can watch variables at each point in the async call stack – check out what values were for variables both before and after you made the async call. You can even do the same thing from the console – select a frame and execute code relative to that frame’s scope, not the current one.
1 2 3
This will tag the method in your dev tools call stack with the function name, instead of “anonymous function”, which as you can imagine makes debugging a lot easier.
The original post has a lot more information and examples, you should go read it!