Full Async Stack Trace when Debugging

I’ve been wishing for this for a long time and the fine folks at Google delivered. Imagine being able to see the full stack trace when debugging, i.e. when tracing against an AJAX or a setTimeout()! You can do this in Chrome Canary already; read on for how to set it up:

As shown in the “vs.” screenshot above, debugging the following piece of code can be made much easier by being able to see the “full story” behind the async stack trace:

function origin() {
    alert('starting');
    setTimeout(function() {
        alert('done; make sure dev tools are open for debugger to trigger');
        debugger;
    }, 100);
}
origin();

To use this amazing tool:

1. Get Chrome Canary: https://www.google.com/intl/en/chrome/browser/canary.html
2. Go to chrome://flags (in Chrome Canary)
3. Check ‘Enable Developer Tool Experiments’:



4. Click “Relaunch Now” at the very bottom of the page:



5. Open Dev Tools:



6. Open Dev Tools Settings (gear icon):



7. In Experiments view – check ‘Enable support for async stack traces’:



8. Close Dev Tools Settings and go to Sources tab; check the ‘Async’ checkbox on the right by “Call Stack”



9. Restart Canary
10. Now you can try running my fiddle (with Dev Tools open) and it will pause on the “debugger” statement right after the second alert window; enjoy your full async stack trace!