Debugging Javascript - From 0 to Heisenberg Full video screencast here: http://youtu.be/-q1z8BPFItw

2. DEBUGGING JAVASCRIPT
0 TO HEISENBERG
Chris Morrow
Senior UI Developer
Video screencast: http://youtu.be/-q1z8BPFItw

3. WALTER WHITE

4. HEISENBERG

5. THE PLAN
JAVASCRIPT BEST PRACTICES (throughout)
BREAKPOINTS
WATCHES
USING THE CONSOLE
CALL STACK
CUSTOM TOOLS / UNIT TESTING

6. TOO MANY COOKS IN
THE KITCHEN?

7. BEST PRACTICES
AVOID GLOBAL VARIABLES
<script>
var now = new Date();
/* more code goes here */
function doSomething(){
alert('the time is ' + now);
}
</script>
/* code below can overwrite "now" var */
<script src="js/dateLibrary.js"></script>

8. PROTECT YOUR VARIABLES WITH SCOPE
<script>
(function(){ // closure function
var now = new Date();
/* more code goes here */
function doSomething(){
alert('the time is ' + now);
}
})();
</script>
/* code below CAN'T change "now" var */

10. WHY DO PEOPLE HATE
DEBUGGING JS?
VARIABLES ARE GLOBAL IN SCOPE
NO REQUIRED STRONG TYPING
CROSS BROWSER COMPATIBILITY (IE!!!)
NO CLASSES

11. DEBUGGING GOT YOU
STRESSED?

12. BREAKPOINTS
NAVIGATING CODE
STANDARD
CONDITIONAL

13. BREAKPOINTS
Continue: continues code execution until we encounter
another breakpoint
Step Over: step through code line-by-line to get insights into
how each line affects the variables being updated. Should
your code call another function, the debugger won't jump into its
code, instead stepping over so that the focus remains on the
current function (scope).
Step Into: like Step over, however clicking Step into at the
function call will cause the debugger to move its execution
to the first line in the functions definition.
Step Out: having stepped into a function, clicking this will
cause the remainder of the function definition to be run and
the debugger will move its execution to the parent function

14. BEST PRACTICES

15. WATCHES

16. ADDING A WATCH: MULTIPLE WAYS
k Sources: select then right-click
k Click "+" on Watch Expressions panel
k Right-click inside Watch Expressions panel

17. SCOPE VARIABLES
k Like watches, but are only shown in scope

18. AND NOW A QUICK MESSAGE FROM OUR
SPONSOR...

20. USING THE CONSOLE
console.log()
console.assert( expression, object )
console.table()
Multiline Commands
Snippets
Live Editing

21. BEST PRACTICES
DO NOT MINIFY CODE IN DEVELOPMENT

23. CALL STACK
BOTTOMS UP

24. CRAPPY CODE

25. CLEAN UP YOUR CODE

26. DEBUGGING TOOLS
ROLL YOUR OWN

27. PRE-DEBUGGING TOOLS
JSHint / JSLint
JsHint is more lenient than JSLint.

28. NOT HAPPY WITH
JSHINT?

29. CUSTO MIZE I T WITH
.jshintrc

30. UNIT TESTING
QUnit: http://qunitjs.com/
Mocha: http://visionmedia.github.io/mocha/
Jasmine: http://jasmine.github.io/

31. REMOTE TESTING
ADOBE EDGE INSPECT

32. RESOURCES / QUESTIONS?
Chrome Dev Tools:
https://developer.chrome.com/devtools
Chrome Dev Tools: Tips & Tricks
https://developer.chrome.com/devtools/docs/tips-and-tricks
jQuery Learning Center:
http://learn.jquery.com/javascript-101/
Design Patterns:
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Douglas Crockford: Javascript the Good Parts
http://javascript.crockford.com/