

Advanced Javascript and Web Debugging Techniques - dmitri1981
http://techblog.badoo.com/blog/2013/11/18/5-advanced-javascript-and-web-debugging-techniques-you-should-know-about/

======
niyazpk
One small tip I'd like to add:

Writing code in _Conditional Breakpoints_ \- So lets say you want to modify
the value of _PRICE_ , but only if _ASIN == 'XYZ'_, then you can write:

    
    
        if(ASIN === 'XYZ') { PRICE = 20 }
    

as the condition for your breakpoint and instead of breaking at that point,
the value of price will be changed only for that ASIN. Helped me a lot during
involved debugging sessions.

~~~
NikhilVerma
This is a great idea !

------
bazzargh
The thing I really miss when debugging js (compared to other debuggers) is the
ability to skip files when stepping. Seeing the innards of
jquery/backbone/underscore is usually no use to me, I only want to look at our
site's code.

I know I can get that effect by liberally sprinkling my code with 'debugger;',
and could even automate that, but still...

~~~
numbnuts
Both Firefox and Chrome allow you to "blackbox" js files of your choice.

[https://developer.mozilla.org/en-
US/docs/Tools/Debugger#Blac...](https://developer.mozilla.org/en-
US/docs/Tools/Debugger#Black_box_a_source)

[http://www.divshot.com/blog/tips-and-tricks/ignoring-
library...](http://www.divshot.com/blog/tips-and-tricks/ignoring-library-code-
while-debugging-in-chrome/)

~~~
oelmekki
That's awesome, thanks.

By any chance, do you also know of a way to exclude jQuery event wrappers from
inspection in the "events" part ? Like in this screenshot :
[http://imgur.com/UaHTrth](http://imgur.com/UaHTrth)

This feature is pretty useless due to the fact that libraries wrap event
callbacks.

~~~
paulirish
That's something we're working on for Chrome. We'll have something soon.

~~~
oelmekki
Very nice, thanks for that.

------
Bahamut
I should add that console.log has its pitfalls - in particular, it will log
objects by reference, so if you are doing some manipulation later in a block,
the value that may be displayed in the Chrome inspector may reflect a value
that was manipulated later on in a block of code.

~~~
niyazpk
This is not the case anymore. They fixed this issue sometime back.

~~~
Bahamut
I've seen this exhibited as lately as Chrome 30.

------
maaaats
When needing a quick console to mobile I have previously used jsconsole[1]
with great success. Weinre can be a bit overkill to set up just for logging
some simple statements.

[1] [http://jsconsole.com/remote-debugging.html](http://jsconsole.com/remote-
debugging.html)

------
thejosh
Oh man, weinre is one project that needs love now Adobe has their grubby hands
on it.

It's really handy for mobile debugging.

------
wging
Regarding weinre: Is that any better than attaching desktop Safari to an ios
simulator (not sure if it works for a physical device) or desktop Chrome dev
tools to a real android device via adb?

In any case, note that that's also a lovely option.

~~~
gibbitz
I use it to debug android stock browser without ADB, or USB for that matter. I
have a bookmarklet set up so I don't have to add the script to the page. The
safari debugger is far superior for mobile safari on iOS, though. Primarily
because js debugging in weinre is almost nonexistent in comparison.

------
tucaz
I wouldn't call "debugger" advanced, but it is certainly useful.

Didn't know about the DOM breakpoint, though.

~~~
madeofpalk
Funny, I'm the opposite. I've found DOM breakpoints useful for a while, but
I've never heard of `debugger` until now. It seems obvious I guess.

------
Trufa
This is very interesting and helpful. Thanks for posting.

------
duiker101
the remote debugging is already implemented in both Chrome and Firefox. Opera
too as far as I know but it's not as simple as the others.

~~~
maaaats
As far as I know, they all rely on you using their browser on mobile as well?

We faced a problem a few weeks ago, where Chrome for mobile worked fine, but
the built in browser on Android phones pre 4.4 had some issues with our web
app. Then we needed something else than Chrome to do the remote debugging.

