What Is ExtJS ExtJS 4+ Extensions Examples Tutorials


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() {
    setTimeout(function() {
        alert('done; make sure dev tools are open for debugger to trigger');
    }, 100);

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. experiments

  5. Click "Relaunch Now" at the very bottom of the page:
  6. relaunch

  7. Open Dev Tools:
  8. Dev-Tools

  9. Open Dev Tools Settings (gear icon):
  10. settings-gears

  11. In Experiments view - check 'Enable support for async stack traces':
  12. enable-async-1

  13. Close Dev Tools Settings and go to Sources tab; check the 'Async' checkbox on the right by "Call Stack"
  14. enable-async-2

  15. Restart Canary
  16. 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!
VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
Full Async Stack Trace when Debugging, 10.0 out of 10 based on 4 ratings
Comments (0) Trackbacks (0)

No comments yet.

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.