DebuggingIt is what you do

Debugging

• Where your time is spent:• 1st place: documentation• 2nd 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 );

TechniquesA 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• 1st 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 tradeDebuggers

• 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 debuggerFirebug 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!

https://getfirebug.com/javascript

Choose .js file

Exec Controls

Exec Controls

• Rerun (reload script)

• Continue (run/play)

• Step Into function

• Step (aka "step over")

• Step Out of function

QuickTime™ and aGIF decompressor

are needed to see this picture.

Position Displays In Code

• Example steps three times

• "Step Over"

• Clicking Continue/run

• does not show

• stops on breaks

Set Break Points

QuickTime™ and aGIF decompressor

are needed to see this picture.

Set Break Points

Clear 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 ConsoleBuilt-in tools rapidly evolving

Built-in Firefox

type help Show Console

HTML / CSSInspector

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