Debugging Asynchronous JavaScript with Chrome DevTools

#1

Post by austengary » Tue, Apr 22, 2014, 2:46 AM UTC

Debugging Asynchronous JavaScript with Chrome DevTools
html5rocks.com

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#2

Post by acdanger » Tue, Apr 22, 2014, 4:49 AM UTC

This looks great. Debugging simple 'click' events has always been a non-trivial task for me -- doubly so on touch devices where an a 'click' event can have a range of unpredictable side effects.

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#3

Post by nraynaud » Tue, Apr 22, 2014, 5:06 AM UTC

I'd like a real console object in worker (at least a variadic pretty-printing log() function and time()/timeEnd()) and a "break all threads" button too, please. Worker debugging is a pain.

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#4

Post by m00t » Tue, Apr 22, 2014, 5:11 AM UTC

acdanger wrote: post #2

This looks great. Debugging simple 'click' events has always been a non-trivial task for me -- doubly so on touch devices where an a 'click' event can have a range of unpredictable side effects.

Are there any beginner tutorials for debugging events? Even simple ones?

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#5

Post by roskilli » Tue, Apr 22, 2014, 5:13 AM UTC

Now if only they could make a standalone IDE backed by chrome dev tools! Then I could use it for Node too :D

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#6

Post by math0ne » Tue, Apr 22, 2014, 5:14 AM UTC

Very nicely produced article, i love the use of animated gifs that is becoming popular for tech demos.

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#7

Post by paulirish » Tue, Apr 22, 2014, 5:16 AM UTC

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 (http://goo.gl/YYlbDK) and you can walk back to where you registered the handler.

(Yeah, no idea why an editor killed this comment. :/ Thanks folz!)

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#8

Post by _navaneethan » Tue, Apr 22, 2014, 5:19 AM UTC

m00t wrote: post #4

acdanger wrote: post #2

This looks great. Debugging simple 'click' events has always been a non-trivial task for me -- doubly so on touch devices where an a 'click' event can have a range of unpredictable side effects.

Are there any beginner tutorials for debugging events? Even simple ones?

http://www.html5rocks.com/en/tutorials/es6/promises/

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#9

Post by paulirish » Tue, Apr 22, 2014, 5:21 AM UTC

nraynaud wrote: post #3

I'd like a real console object in worker (at least a variadic pretty-printing log() function and time()/timeEnd()) and a "break all threads" button too, please. Worker debugging is a pain.

I know it took a while, but take another look: Chrome now has full console support inside of workers: http://crbug.com/63383

Right now, we're doing a bunch of work (hah) on our worker support. We'll address pausing execution in workers as well. Expect good improvements and file a ticket at crbug.com for any other ideas, please!

Re: Debugging Asynchronous JavaScript with Chrome DevTools

#10

Post by paulirish » Tue, Apr 22, 2014, 5:34 AM UTC

m00t wrote: post #4

acdanger wrote: post #2

This looks great. Debugging simple 'click' events has always been a non-trivial task for me -- doubly so on touch devices where an a 'click' event can have a range of unpredictable side effects.

Are there any beginner tutorials for debugging events? Even simple ones?

https://developers.google.com/chrome-developer-tools/docs/ja... gives a decent overview of the basics and what you can do beyond that.