Coding out of procrastination

Closures (a function instance coupled with local variables from its environment that are necessary for its execution – B. Katz) are an intrinsic part of the JavaScript language and if you have done more than a few lines of simple JavaScript you have used them whether consciously or not, especially if working with the jQuery library and/or Ajax callbacks. 

I really like Closures, however I hate debugging when it involves closures, for the simple fact that my favourite JavaScript tool Firebug with Firefox has severe problems evaluating (during a break) on variables that form part of the closure.  An unhelpful “Reference Error: x is not defined” is all we get, where x is the variable name.  Hovering over the variable or using the command window does not work either.

An experiment on previous versions of FF/FB and in Ubuntu linux was even more disappointing with “break on all errors” not working correctly either, so from what I understand this is a non-platform specific issue (please correct me otherwise).

I use this simple code to illustrate (jQuery dependency) the issue with debugging closures:

$(function()

  {

     var myName = "matt";

      var otherNames = ["ted","john","matt","fred"];

     $.each(otherNames, function()

           {

                   var result;

                   if(this == myName)

                   {

                      result = this + " is SAME as "  + myName;

                   } else {

                       result = this + " is not same as " +  myName;

                   }

                    $('<p>' + result + '</p>').appendTo('#matchResults');

           });

  });

​

Note: For the jQuery savy amongst us I concede that this is overly verbose.

For the paste bin complete with fancy HTML click here.

Here’s the result in Firefox 3.6:

As you can see the runtime (Firefox JavaScript engine – TraceMonkey) can correctly evaluate myName (otherwise we’d never branch into the if  block) but unfortunately either due to a Firebug bug or the optimization that the TraceMonkey engine makes we can not see the value in the Watch window. Some have suggested that due to optimizations there is not enough profile data to determine myName from the debugging environment.

Google Chrome and its V8 engine does much better in this respect, not only can it evaluate myName, but it also gives me a breakdown of what variables are local and which are part of the closure. Sweet. Unfortunately in this instance, it wouldn’t break on the breakpoint I set, but at least it stopped on the next available point (outside the if/else block), presumably this is because Chrome’s V8 engine was able to optimize the branch (maybe due to the data being available at load time). Chrome also does syntax highlighting on JavaScript – just not on inline scripts.

Next up, Internet Explorer 8, I didn’t expect much from the IE team (after a let down with IE6 and IE7), but their new Developer Tools proved me wrong, loaded very fast, evaluated myName correctly and even nice color syntax highlighting, you can tell they have been influenced by Firebug design but why not? It works very nice.

I include Opera 10.5 for good measure however despite their trumpeting about DragonFly I found it very poor like a pre v1 beta of Firebug. One can not add anything to the watch window, can not hover on source code to expose values, I even had to switch to the command window to evaluate myName (at least it did better than Firebug in this case though).

I know the Apple fanboys would hit me with their new iPads if I didn’t include Safari 4, I wish I had suitable VM to download this bloat to (30.2mb just for a browser), the scarifies I make in the name of blogging.  But hold up, this looks familiar, the same Web Inspector as Chrome – I always thought WebKit was just the renderer. But something interesting has happened unlike Chrome, this breaks in the correct place, and reveals the closure variable, this is exactly what I wanted. This may be a postitive side-effect that Safari’s JavaScript engine is less optimizing than Chrome’s V8 but for debugging I can spare a few extra nanoseconds. I eat my words, Safari for JavaScript debugging is pretty good. Like Chrome, Safari also does syntax highlighting on JavaScript – just not on inline scripts.

In conclusion, there are more tools for debugging JavaScript against the DOM than just Firebug, whilst Firebug is still my favourite at least I’ve discovered some alternatives for when Firebug just can’t deliver. Surprisingly Safari is now my first backup choice.

I’d be interested in hearing workarounds (other than promoting the variable to global) and possible configuration options to disable JavaScript optimizations when debugging – please leave in the comments.

Firefox – If you’re still using IE6 or 7 then skip this whole blog post! If you are a Firefox user then great! but make sure you’re exploiting its full productive power rather than just drinking the kool-aid. I highly recommend learning a few important keyboard shortcuts to reduce the amount of mouse friction you have to endeavour when browsing the web.

The ones I use most frequently are:

CTRL + L: Puts the caret in the location bar.
CTRL + T: Open a new tab
CTRL + TAB (and SHIFT+ CTRL + TAB) : Cycle through open tabs
CTRL + J: Open the downloads windows
CTRL + D: Bookmark this page – Now mapped to del.icio.us
ALT + LEFT: Back

For the hardcore keyboard jedis, you can also select text using the caret mode (toggle with F7) but for this I find the mouse a lot easier, let’s not go too nuts with keyboard.

Download, print and pin this firefox keyboard cheatsheet to the side of your monitor for a few days until you internalize the shortcuts.

Google Browser Sync, Foxmarks Del.icio.us – This is now my bookmark tool of choice, it replaces rather than complements my previous bookmanager sync tools. I have enabled the delicious bookmark toolbar as below, and whenever I need to add a bookmark (CTRL+D) to something I frequently use and want in the toolbar I just tag it with for example toolbar-work or toolbar-docs and voila! When bookmarking other sites just assigned the relevant tags and you can find them again in the Delicious Sidebar (CTRL+B). I bookmark and tag anything that I think I will need to refer to again and the tag method gives me less friction than traditional bookmark folders (in addition to being fully backed up and accessible from any browser or computer). I have del.icio.us enabled on my laptop, work PC and Mac and the sync works so much better than Foxmarks or Google  Browser Sync, since there is one centralised authority. The only downside is that you need to be signed in to bookmark, but I’ve not come across an offline scenario where I’ve needed to bookmark something yet.

Google Mail For Enterprise – I’m a bit of a Google fan admittedly, Google Mail has served me well for the past few years and the upgraded enterprise account at $50  per year for 25gb, an SLA and no-ads makes me evangelise this product even more.  I can access my mail from any computer and nearly all mobile phones, in addition I have it poll and import my old legacy POP3/IMAP mail traffic until I’m ready to properly close them. Google Mail makes a departure from using folders to organize mail instead preferring tags, once you can get used it, you won’t go back to the bloatware trap of Outlook – trust me!

Passpack – I use this to store all my sensitive passwords, credit card numbers and any pin numbers, I got sick a long time ago of having to use Forgotten my password functionality and equally my paranoid nature leads to avoid using the same password across multiple sites and services. I’ve complete faith in passpack due to the two phase encryption used (part of it is decrypted in your browser) so no one without the correct access key can read you data. Passpack also has a nice little password generator and also disposable logins that I save on my phone (no mentioning passpack obviously) incase I ever need to retrieve some information using a vulnerable computer.

Windows Live Mesh – Windows Live Mesh is a great folder/file sync tool when using multiple PCs, but also a great free 5gb backup account. Folders are synced across multiple PCs you add to your mesh, but are also backed up to the Microsoft cloud too, and you can access them from any computer with a suitable web browser. I had previously used FolderShare but this is like the steroid version of it. Oh and it’s free too. I sync my devtools directory and my ebook directory across all my computers and so far it’s worked great.

Arsclip – Not stricitly a web tool but arsclip is an amazing little clipboard ring that works across all applications. Simply press ctrl+alt+z and you can cycle through last dozen or so items stored in the clipboard.  Don’t rely on the visual studio clipboard ring, install this app and be done with it!