SP2010 AJAX part 7: Useful tools when building AJAX applications

1. Boiling jQuery down to the essentials (technique)
2. Using the JavaScript Client OM to work with lists (technique)
3. Using jQuery AJAX with a HTTP handler (technique)
4. Returning JSON from a HTTP handler (technique)
5. Enable Intellisense for Client OM and jQuery (tip)
6. Debugging jQuery/JavaScript (tip)
7. Useful tools when building AJAX applications (tip) - this article
8. Migrating existing applications to jQuery/AJAX

In this ‘quick tip’ article I want to show you my pick of the tools you might use when building AJAX applications on top of SharePoint 2010. For the most part, the ‘core’ tool used is the debugger which, as we discussed last time, could be Firefox/Firebug or the IE Developer Tools depending on your preference – the tools here take this further. In fact they’re not specific to SharePoint in any way, and Elijah Manor has a more comprehensive drilldown in his Debugging jQuery article I recommended last time – I’m merely adding my view as what particularly helped me on my journey. And since my analytics tell me that (at the time of writing) only 3% of folks who read that article followed the link, I may as well do my bit to spread this information.

All of the tools recommended here are Firebug add-ons (itself an add-on for Firefox) – arguably backing up the view that Firefox currently offers a superior JavaScript developing/debugging experience to IE.

Tool #1 – Firefinder

Firefinder specializes in helping you debug jQuery selectors – this is often necessary as a first step to finding out why your button click event (or similar) isn’t happening. Firefinder is specifically capable of working with selectors which are valid CSS selectors (remember that jQuery uses CSS selectors but adds some of it’s own), but for much of the time this is all you need. In addition, it also has XPATH capability which could be handy if you’re using the jQuery XPATH plugin (or otherwise just working with XPATH over XHTML). Firefinder appears as a tab in Firebug – simply enter the ID/CSS class/XPATH of the element you’re trying to select, and jQuery will highlight any matches with a dotted red border:

Selecting by CSS class:

Selecting by HTML ID:

The ‘Inspect’ link is particularly useful as it takes you directly to that place in Firebug’s HTML view:

Tool #2 – FireQuery

Continuing the example of establishing why a jQuery event isn’t firing, FireQuery is awesome for showing you which events have been bound to which HTML elements. Consider that the unobtrusive nature of jQuery means that events are bound separately and your HTML is completely ‘pure’ with no nasty onclick attributes to ruin the separation of presentation and behavioural logic. Of course, this does mean that you cannot natively ‘see’ if a control has a jQuery event attached. Enter FireQuery – it injects text into the HTML view in Firebug to show you where your events are on the page. Here I can see that the button I’m looking at has a click event bound to it:

That’s it for today. Again, I highly recommend you check out Elijah Manor’s How to Debug your jQuery code article.

Next time: Migrating existing applications to jQuery/AJAX