Debug your Javascript code for free

Javascript is one language you cannot avoid if you go anywhere near web development or cloud computing. Even when coding in PHP, ASP.Net or Java, Javascript is necessary for smooth client-side performance. You can take advantage of the numerous Javascript libraries out there, such as Jquery, Dojo, Mootools, Prototype or Scriptaculous.

There are also several Javascript APIs (application programming interfaces) for web services, including mapping APIs such as Google Maps, Facebook’s Javascript Client Library, or any Rest (URL-based) API, particularly those that return data in JSON (Javascript object notation).

So, what is the best tool for editing and debugging Javascript?

The Javascript you write may be executed by any number of different runtime engines in various versions. According to the latest figures from Hitslink, that means 68 per cent Internet Explorer, 21 per cent Firefox, eight per cent Safari, one per cent Google Chrome, and so on. It gets worse if you drill into browser versions. The next most popular browser after IE 7 is IE 6.

Write once, test everywhere seems to be the order of the day. That said, Javascript is a well-known ECMA standard and cross-browser compatibility of the core language is good.

The bigger issue is over the browser’s Document Object Model (DOM) or Cascading Style Sheets (CSS) implementations, which vary greatly. Javascript libraries wrap these as far as they can, but you will still encounter them in your own code.

Javascript debugging used to be a matter of sprinkling alert statements through your code or printing to a debug window. That is no longer the case. What follows is a look at some popular options for Javascript development and debugging.

Debugging with Firebug
Open the page you want to debug and select Firebug from the View menu. Firebug slows web browsing, so by default it is mostly disabled. Check the panels for Console, Script and Net, and Firebug bursts into life.

The Console tab is a command line into the active web page. For example, if you type
document.body.innerHTML="Hello world";
your web page will be replaced. You can also write to the console in your Javascript with commands such as: console.log(“some value”)

Another handy command is dir(), which inspects an object and outputs its values. You can type these at the console or include them in your code.

The HTML tab shows the source code for the current page. If you click Inspect in the top Firebug bar and hover the mouse over an element in the page, the code for it is highlighted in the HTML view. The CSS tab shows the styles defined for the page.

The Script tab is where you can get deep into debugging. Set a breakpoint by clicking in the left margin so a red dot appears. Run the code, and it will pause at your breakpoint. Now you can inspect variables, step over, into or out of the code, and view the stack trace.

This insight is invaluable. Say, for example, you are coding against Microsoft’s Virtual Earth API. One argument to the findPlace method is a function that is called back with the results. Two of the arguments to the callback function are arrays of results, and the documentation is not all that clear on how they differ. The breakpoint lets you inspect the arrays in detail.

The Net tab in Firebug shows you each separate HTTP request that forms the current page, with headers, timings and other details.