Javascript debugging

JAVA SCRIPT 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 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 IE7 is IE6.

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="<b>Hello world</b>";

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.

Debugging with Visual Studio
Firebug is only a debugger. You can edit pages on the fly, but it is not an IDE (integrated development environment) and those edits are lost once you close the page. A more integrated alternative is Microsoft's Visual Web Developer, even for projects that do not use ASP.Net. For this the free Visual Web Developer Express edition is fine.

Run Visual Web Developer and start a new website. Choose the Empty Web Site template, add a new HTML page and code your Javascript. Click Run or press F5 to start debugging.

At this point Visual Studio will prompt you to create a web.config file to enable debugging. Let it do so. It may also display a dialogue stating that debugging is disabled in internet Explorer. You have to run IE, select Tools, Internet Options, Advanced, and uncheck Disable Script Debugging. Then exit IE and try debugging again.

There are several strong features. Visual Studio has its own internal web server, which is a secure and simple way of debugging .Net or static websites. Set a breakpoint in your code and try the application. The debugger is in Visual Studio, not IE, and you get full features including variable inspection, watches, call stack and an immediate window where you can type Javascript code and access the DOM.

Visual Studio also supports the debugger statement, which works like a breakpoint. Press F11 to step into code, or F10 to step over. It is not quite as feature-rich as Firebug; there is no way to write to the output window and no timings to profile your code. That said, Visual Studio is a decent HTML-authoring environment, from a developer as opposed to a designer perspective, and has a CSS editor and an HTML document outline that speeds code navigation.

The Visual Studio editor has error detection and code completion for built-in types. It formats your code subject to the rules in Formatting and Validation, available from a right-click menu in the editor. It is highly customisable, right down to settings for individual tags.

There are problems with Visual Studio for Javascript debugging. One is that you are debugging IE and while you can preview your application in other browsers, you lose the debugging integration. Since IE is quirkier than other browsers, this makes it hard to use for all your debugging.

There is an annoyance: browsing the web with IE's debugging enabled can result in continual error dialogues. IE8 is better in this respect, because Visual Studio can enable and disable debugging on the fly, so you can still browse with debugging disabled.

Debugging with Aptana
Aptana is a commercial, open-source IDE built on Eclipse. There is a free edition for Windows, Mac or Linux. Since Aptana is somewhat intrusive, inserting its own top-level menu, the standalone option is attractive.

Aptana is a specialist Javascript IDE, with some unique features. One advantage is that you can specify commonly used Javascript libraries when starting a new project. These are inserted into a lib folder in your project directory.

For example, here is how to create a simple Scriptaculous slide effect. Start a new Aptana project, and check the option for Scriptaculous. Modify the generated index.html, first inserting a reference to the Scriptaculous and Prototype libraries within the <head> element:

<script src="lib/prototype/prototype.js" type="text/javascript"> </script>
<script src="lib/scriptaculous/scriptaculous.js" type="text/javascript">
</script>

Next, write some text within a <div> element that will be the subject of the slide effect:

<div id="slider"><p>This text will appear and disappear with a slide
effect.
</p></div>

Add a <script> element with a function to apply the effect:

<script type="text/javascript">
function slideit(show){
if (show) {
Effect.SlideDown('slider'); }
else {
Effect.SlideUp('slider');
}}
</script>

Finally, add some controls to apply the effect:

<button onclick="slideit(true);">
Show with a slide
</button>
<button onclick="slideit(false);">
Hide with a slide
</button>

You can test this by clicking the preview tab for Firefox or IE. You can also set breakpoints and debug the code. Click the Debug perspective icon or select Windows, Open Perspective, Other and then Debug.

In the source window, click in the left margin by the line where you want the breakpoint. Next, click the Debug icon in the toolbar, or select Debug, Firefox Internal Server.

Exercise the code and Aptana activates the debugger at the selected line. From the Debug window, you can choose the usual options: resume, step in, step over, step out. In the example above there is not much to debug, but you can choose ‘step in' to trace through the Scriptaculous function for SlideDown or SlideUp.

Since Aptana is based on Eclipse, it is easily extended, and it has support for PHP, Ruby on Rails, Python and Adobe Flex. You can use it with the Flex SDK to create Flash and Air applications, as an alternative to Adobe's official Flexbuilder IDE. It also includes the Jaxer server, which runs Javascript server-side, and an option to deploy your applications on Aptana's cloud platform, which is provided by Joyent. It packs in a lot of features, but still falls short of the ease of use in Microsoft's Visual Studio. µ

Resources
Firebug
Visual Web Developer Express
Aptana
Scriptaculous