#TIL: Chrome Is Getting Async Debugging

You can’t imagine how excited I am for this! As someone who’s entire UI is written in asynchronous JavaScript, debugging and tracing bugs and other issues can be a huge pain in the neck – not anymore with Chrome dev tools!

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.

Also, as a bonus TIL, I learned you can (and should) name your anonymous functions in JavaScript:

1
2
3
window.addEventListener('load', function windowLoaded() {
  //do stuff
});

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!

Comments