Asynchronous JS stacks

[paulirish]

They're now supported with a setting enabled:
https://codereview.chromium.org/80383004
https://code.google.com/p/chromium/issues/detail?id=272416

We'll need docs for this, on the settings side, and probably on the JS debugging side as well.

[paulirish]

tests

http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/debugger/async-callstack.html
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/debugger/async-callstack-expected.txt

[paulirish]

cc @pearlchen

[paulirish]

To anyone that wants to play with this feature:

• open https://rawgithub.com/mirrors/blink/master/LayoutTests/inspector/debugger/async-callstack.html
• in canary devtools / sources .. turn on the async checkbox
• place a few breakpoints or whatever
• run this in console:
  • testFunction()

there are a few other tests files for async callstacks in https://github.com/mirrors/blink/tree/master/LayoutTests/inspector/debugger

[paulirish]

post format: similar to http://www.html5rocks.com/en/tutorials/canvas/inspection/

• let's identify what we think is the most compelling usecase here. should highlight it.. whatever it is. :)
• coverage of async support:
  • Timers
  • Animation frames
  • XHRs
  • Event listeners
  • MutationObservers
  • Promises
  • CustomElement lifecycle callbacks
  • Object.observe
• how it works as a user
• before/after screenshots
• small demo

[paulirish]

nice screenshot of async event listener stack.

i placed a breakpoint inside of an event handler. after i hit it i clicked back to where the event was registered.

[paulirish]

the feature is also fantastic for resolving event listeners:

you can walk from the event handler back to where it was registered in jQuery then back to where you asked for it to be registered in your app code.

[addyosmani]

@pearlchen is there a draft of this that was started somewhere? :)

[pearlchen-old]

@addyosmani Not yet -- other launches have gotten in the way. But this is what I'm working on today/tomorrow.

[pearlchen-old]

Better timed animated gif:

[paulirish]

Obviously this feature is documented here:
http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

we'll need something in the docs, but this will do for now.

[paulirish]