1. Debugging It is what you do

2. Debugging Where your time is spent: 1 st place: documentation 2 nd place: debugging Most valuable skill: Debugging!

3. "Poor Man's" debugging Find how to OUTPUT (print) variables alert( this ); console.log( this ); //need dev tools Find out how to INPUT (type or choose) prompt( this );

4. Techniques A few formal approaches

5. Science Experiments Guess (theory) Change something (variable) Run it (experiment) repeat the trial and error could be formal or informal

6. Test Cases Program testing code Recycle your experiments! Repeatable Automate repetitive tests Do stress testing Test Driven Design (TDD)

7. //buggy code: var dog; function bad_dog(){ dogg= "woof"; } //test case #1: bad_dog(); if( ! dog ){ alert( 'dog was not set' );}

8. assertions test cases PUT INTO THE PROGRAM preconditions check that things are as you expect postconditions check that result is as expected Not popular for scripting / runtime

9. function average(){ if(arguments.length==0){ throw('nothing to average!');} var total=0; for(i=0; i<arguments.length; ++i){ total+= arguments[i]; } return total / arguments.length; } average(); // incorrect use

10. Break problems down; simplify Science tests the fewest variables Block Comments /**/ Test files Duplicate: delete without worry Test pages: use as a future reference Divide and Conquer

11. Remove extraneous stuff The "innocent" may only look it... Call function / methods directly try out a sub-system console; or write a little code Deconstruct function code break it but see that it acts as you expect

12. Postmortem Bug happened; it crashed/died etc. Dumps/Logs (not likely here) Browser Error Console might help Trace - using the info you have, you follow the steps taken to cause the problem Like a Murder Mystery

13. Firefox Console

14. Firebug Console

15. tracing Postmortem needs evidence Use Poor man's debugging technique OUTPUT (print or log) during exec Mental tracing would be reading the code and following it's flow 1 st attempt is ok; but will u see it?

16. function goofy_function(x){ alert(x); x+= 3; alert(x); if(x = 5 ){ x*10; } alert(x); }

17. Reconstruction Rewrite in smallest steps possible Useful for exploring APIs Useful in a console… Useful in LEARNING Could end up in another implementation; in which case chuck the buggy one.

19. Tool of the trade Debuggers

20. Run, Break, Step, Step In, Step Out Break points - mark lines in code Variable Viewer and/or Watch Call Stack Profiler Console and/or command line tools Debugger features

21. most popular javascript debugger Firebug Debugger

22. Firebug add-ons This add-on has it's own add-ons! FireRainbow adds color coding to js debugger Firebug Autocompleter adds autocomplete to console!

23. https://getfirebug.com/java script

24. Choose.js file

25. Exec Controls

26. Rerun (reload script) Continue (run/play) Step Into function Step (aka "step over") Step Out of function

27. Position Displays In Code Example steps three times "Step Over" Clicking Continue/run does not show stops on breaks

28. Set Break Points

30. Clear Break Points

31. All break points set Disable (checkbox) Delete (X circle on right)

32. FireRainbow Default install may be all BLACK Script Tab of Firebug: Colors tab on right Reset to default Randomize…

33. Firebug Autocompleter Automatic in Console DOM Reference! View menu: Sidebar: Firebug Autocompleter Displays last autocompleted word

35. Firefox Console Built-in tools rapidly evolving

36. Built-in Firefox

37. type helpShow Console HTML / CSS Inspector Javascript Debugger

38. Not as powerful or as mature as Firebug No add-on installations Command line tool is powerful it is NOT a javascript console Console is more compact than firebug FASTER RUNNING Inspector the is weak too; debugger ok

39. 3D html inspector