[deleted]
Debugging Asynchronous JavaScript with Chrome DevTools
11–20 of 50 posts
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#12Comment from Paul Irish, who is marked [dead]:
Protip with this feature: It can resolve where you originally bound your event listeners, regardless of if you used jQuery or whatever. So, either set up a breakpoint or establish an Event Listener Breakpoint[1] and you can walk back to where you registered the handler.
[1]: https://developers.google.com/chrome-developer-tools/docs/ja...
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#13Wasn't this possible already? Put a breakpoint or 'breakpoint;' on the function body's first line and it will pause execution when the function is called synchronously or asynchronously. And browse the call stack on the right column. What's new here? I have been doing this for quite sometime.
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#14Wow, this is seriously cool! No doubt it will mean more switching back and for between Firebug and Chrome DevTools. Or am I the last one still using Firebug?
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#15Now if only they could make a standalone IDE backed by chrome dev tools! Then I could use it for Node too :D
GitHub's Atom ( though its an editor, not IDE ) is backed by chrome dev tools I think.
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#16Now if only they could make a standalone IDE backed by chrome dev tools! Then I could use it for Node too :D
Have you tried Node-Inspector[1]?
With it, you can use Chrome Dev Tools to debug your nodejs app.
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#17Comment from Paul Irish, who is marked [dead]: Protip with this feature: It can resolve where you originally bound your event listeners, regardless of if you used jQuery or whatever. So, either set up a breakpoint or establish an Event Listener Breakpoint[1] and you can walk back to where you registered the handler. [1]: https://developers.google.com/chrome-developer-tools/docs/ja...
I'd guess that Paul's comment was killed because he used a shortened URL.
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#18Wasn't this possible already? Put a breakpoint or 'breakpoint;' on the function body's first line and it will pause execution when the function is called synchronously or asynchronously. And browse the call stack on the right column. What's new here? I have been doing this for quite sometime.
This assumes you know the function that's being triggered. It's not always clear. And throw JQuery into the mix and things get murkier pretty quickly.
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#19Wasn't this possible already? Put a breakpoint or 'breakpoint;' on the function body's first line and it will pause execution when the function is called synchronously or asynchronously. And browse the call stack on the right column. What's new here? I have been doing this for quite sometime.
The difference (I believe) is in the stack trace depth, specifically that the trace doesn't die if it happens to go through an async event. You can see in the first gif that if the async box is checked it allows a developer to see the stack trace all the way back to when the form submit event was initiated, despite the fact that an async ajax call was made in the middle of the stack. Normally, the stack trace stops at a response to an async event. You can see this in the beginning of the gif without the async box checked.
Re: Debugging Asynchronous JavaScript with Chrome DevTools
#20Wasn't this possible already? Put a breakpoint or 'breakpoint;' on the function body's first line and it will pause execution when the function is called synchronously or asynchronously. And browse the call stack on the right column. What's new here? I have been doing this for quite sometime.
Asynchronous hops have never been traceable in JavaScript callstacks before. This feature allows you to hop across the asynchronous gap of a bunch of APIs: addEventListener, setInterval, setTimeout, XMLHttpRequest, promises, requestAnimationFrame, and MutationObservers.
More visually, check out the Before/After images from the doc: http://imgur.com/rZlgrMe