{"id":5270,"date":"2013-11-18T05:05:02","date_gmt":"2013-11-17T18:05:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5270"},"modified":"2013-11-18T05:05:02","modified_gmt":"2013-11-17T18:05:02","slug":"javascript-debug-via-firefox-and-firebug-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-debug-via-firefox-and-firebug-primer-tutorial\/","title":{"rendered":"Javascript Debug via Firefox and Firebug Primer Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript Debug via Firefox and Firebug Primer Tutorial<\/p><\/div>\n

Today’s tutorial (live run<\/a>) shows some debugging techniques for Javascript work that involved the use of Firefox and its wonderful Firebug plugin (instigated via Firefox menu Tools->Web Developer->Firebug->Open Firebug), and builds on your knowledge from previous relevant Firefox and Favourite Plugins Tutorial<\/a> as shown below.<\/p>\n

The background to the tutorial<\/a> is the finding of a bug<\/a> in the code for the Tic Tac Toe game presented in a few of the tutorials of this blog. Bugs take all forms and this bug would be in the category of “it may never happen, but it is annoying leaving it this way” (ie. a player was able to click a square already picked … know none of this blog’s readers would cheat this way … surely?!). Some bugs are much worse, in that “something doesn’t work” or “something doesn’t work, and it is crucial” (the latter being much worse, naturally). By the way, in business, the way bugs should be treated is in a scientific way that doesn’t catastrophize things … no code is perfect … you aim for perfection, but you can stretch the situation to whatever extreme to break it one way or the other. You’ll never achieve enough with unnecessary engineering, in the same way it is vitally important your code is functional in some way shape or form.<\/p>\n

<\/p>\n

Below, we’ll show you the podcast’s transcript (modified to document.getElementById([the img id]).id;<\/i> and cgoes=””;<\/i> from actual podcast).<\/p>\n

<\/strong><\/p>\n

Sometimes you code something and discover
\nmuch later there is a logical weakness.<\/p>\n

Take the TicTacToe game mentioned often in
\nthis blog and written ages ago.<\/p>\n

Today found out the player could reclick a
\nsquare … da da da da … let’s debug!!
\n————————–
\nStep 1) Identify problem … oops
\nStep 2) As necessary get Firebug on Firefox
\n going … already done
\nStep 3) If you are freshly familiar with
\n Javascript, you may not need to,
\n but here, am not, and use the
\n Firebug-friendly Javascript
\n console.log() method to help
\n re-understand the code
\nStep 4) Run this new code … ah, remember
\n now … the id of td element
\n owning img is ‘t’ +
\n document.getElementById([the img id]).id;
\nStep 5) Use a global variable (var cgoes=””;)
\n that lasts through the length of
\n game and is filled with moves
\n (encased by “;”) … compare
\n a move against cgoes and if found
\n this move is a nono …
\n alert(“huh?”); … change
\n accordingly
\nStep 6) Run modified code as above … that’s
\n better
\nStep 7) If okay we could comment out
\n console.log(); rather than
\n completely delete it, being as
\n it helps future understanding,
\n as would ideas like source
\n control and adding your own
\n Javascript comments within
\n code and\/or up the top of code
\n—————————————–
\nThanks for your attention … adios … after
\n showing you this last go … good, no
\n console.log() nor alert() …
\n selamat sore.<\/p>\n<\/blockquote>\n

<\/p>\n

This transcript, and podcast refer to some code difference references, as shown below.<\/p>\n

<\/strong><\/p>\n

Roberts-MacBook-Pro:htdocs robertmetcalfe$ diff TicTacToe_AsPer_OriginalBug.html TicTacToe_IntoInvestigating_OriginalBug.html
\n55a56,58
\n> var paris=document.getElementById(‘t’ + suffix);
\n> console.log(paris.innerHTML);
\n> alert(paris.innerHTML);
\nRoberts-MacBook-Pro:htdocs robertmetcalfe$ diff TicTacToe_IntoInvestigating_OriginalBug.html TicTacToe_ConsoleLog.html
\n6a7
\n> var cgoes=””;
\n20a22
\n> cgoes = “”;
\n54a57,60
\n> \/\/alert(cgoes);
\n> if (cgoes.indexOf(“;” + suffix + “;”) != -1) {
\n> alert(“Huh?”);
\n> } else {
\n55a62
\n> cgoes = cgoes + “;” + suffix + “;”;
\n58c65
\n< alert(paris.innerHTML);\n---\n> \/\/alert(paris.innerHTML);
\n148a156
\n> cgoes = cgoes + “;” + nxt.id + “;”;
\n215a224
\n> cgoes = cgoes + “;” + nxt.id + “;”;
\n218a228
\n> }
\nRoberts-MacBook-Pro:htdocs robertmetcalfe$ diff TicTacToe_ConsoleLog.html TicTacToe_NoCheating.html
\n63,64c63,64
\n< var paris=document.getElementById('t' + suffix);\n< console.log(paris.innerHTML);\n---\n> \/\/var paris=document.getElementById(‘t’ + suffix);
\n> \/\/console.log(paris.innerHTML);
\nRoberts-MacBook-Pro:htdocs robertmetcalfe$\n<\/p><\/blockquote>\n

A couple of good things to note about this Javascript tutorial are:<\/p>\n