Some tips on using chrome developer tools to help javascript debugging

1. Javascript debugging
Now with added Chrome!

2. First up
● Switch off browser caching
● Only occurs when the developer tools
window is open

3. Avoid inline!
● We can't use the majority of js tools for
inline javascript
● But we follow 'unobtrusive javascript'
anyway...don't we? :-)
● Keep js code in .js files

4. Console.log
● Note: causes IE < 9 to crash
● Can send strings, ints and multiple objects
to the console
● Not convinced logging is synchronous –
under heavy load (eg sending big data
objects to console) messages seem to be
out of order
●

5. Breakpoints
● Recommended way to analyse code flow
and state
● Add via the sources tab
● Global on/off switch
● Play/step over/step into/step out
● Breakpoints list

6. Scope variables
● While stopped at a breakpoint examine or
edit variable state
● Grouped by scope – local, closure(s) and
global

7. Interactive console
● Javascript as you type, with code
completion!
● Objects displayed as tree structures for
easy viewing
● Same scope as current – in particular when
stopped at a breakpoint

8. Call stack
● While stopped at a breakpoint see the calls
that preceeded.
● Click on elements in the stack to examine
the code and view the state

9. DOM breakpoints
● Right click a DOM node in the elements tab
and select 'Break on..'
● Make sure you choose the right node and
the right type

10. Want more?
● Watch expressions
● XHR breakpoints
● Event listener breakpoints

11. Get coding!