debugging it is what you do. debugging where your time is spent: 1 st place: documentation 2 nd...
DESCRIPTION
"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 );TRANSCRIPT
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