Debugging It is what you do

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

"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 );

Techniques A few formal approaches

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

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

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

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

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

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

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

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

Firefox Console

Firebug Console

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?

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

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.

Tool of the trade Debuggers

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

most popular javascript debugger Firebug Debugger

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!

script

Choose.js file

Exec Controls

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

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

Set Break Points

Clear Break Points

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

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

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

Firefox Console Built-in tools rapidly evolving

Built-in Firefox

type helpShow Console HTML / CSS Inspector Javascript Debugger

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

3D html inspector