Debugging Javascript
1 like1,019 views
This document discusses best practices for debugging JavaScript including using breakpoints, watches, the console, call stacks, and unit testing. It recommends avoiding global variables, using scope to protect variables, and cleaning up code. Custom debugging tools, JSHint/JSLint, and resources for remote testing and learning more are also mentioned.
Debugging Javascript
- 2. DEBUGGING JAVASCRIPT FROM 0 TO HEISENBERG Chris Morrow Senior UI Developer
- 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 Android - (Chrome Dev Tools) https://developer.chrome.com/devtools iOS - (Safari Dev Tools) https://developer.apple.com/safari/tools/ Browser Stack: $39.99/month and up http://www.browserstack.com/ Adobe Edge Inspect: $9.99/month https://creative.adobe.com/products/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/