Must-have tools for HTML, JavaScript and AJAX development and debugging

Fill your JavaScript toolbox with open source tools for coding and debugging

Michael Baierl, Corporate Webmaster, IBM

Michael Baierl http://mbaierl.com/ is working as Corporate Webmaster at IBM maintaining 100 country portals and several back-end applications. His focus is on JavaScript integration, standardization and quality across the whole ibm.com domain. Previously, he consulted the IBM Data Studio Administration Console development team on JavaScript usage. He is a Zend Certified Engineer and uses PHP for all kind of productivity tools as well as for large scale applications.

Summary: Use the best open source tools to work with Web pages, scripts, and styles, and make development of new sites and pages easy. Inspect and modify HTML markup, CSS, and JavaScript on the fly, inspect the DOM and client-server communications, and learn how bookmarklets can make development safer and easier.

Date: 11 Mar 2008
Level: Intermediate
PDF: A4 and Letter (304KB | 19 pages)Get Adobe® Reader®
Activity: 2004 views
Comments:

JavaScript applications are becoming more and more complex -- developers have to know a wide range of tools and applications in order to debug code on the server and on the client side. And they need tools to inspect the communication between the two -- across markup, scripting, CSS and other technologies commonly used to build Web sites today.

This article focuses on the client side of the development process, and presents some Firefox tools that make a developer's life much easier. They allow you to inspect a page, change data, and even debug JavaScript -- all on the fly. With these tools you can do away with alert() statements in JavaScript source code in favor of state-of-the-art debugging, inspection and modification.

By the end of this article, you should be able to use the Firefox extensions and tools covered here on your own, and apply the knowledge to your own projects.

Contents

In this article, you use tools to inspect a page's HTML code and modify parts of it on the fly, do advanced JavaScript debugging, modify the DOM, inspect communications between the client and the server, and inject development code into a live Web site for testing new features.

To follow along with this article, you need access to the following tools:

The Web Developer Toolbar for Firefox to inspect HTML code and modify parts of it on the fly, and to debug JavaScript
Firebug to debug JavaScript and CSS, to modify the DOM, and to inspect communication between the client and the server
Greasemonkey and bookmarklets including jQuery to inject development code into a live Web site to test new features

As you can see, this article covers a lot of ground, and so it ends up only scratching the surface of what these tools are capable of. Nevertheless, you will get a grasp of how to use each of these tools, and a sense of what they can do for you. Unfortunately, client/server communication is out of the scope of this article, but may be handled in a future installment.

Before you start

All of the tools described here are available at no charge, and you can download them from the links above, or those in the Resources section at the end of this article. If you would like to work along with the examples in the article, you should download them now. Don't forget to restart your browser for the changes to take effect.

Many of the examples make use of the IBM Support site (http://www.ibm.com/support) or a Google results page, so you may want open one or both of those in a new browser window as well.

Inspecting client-side code

Imagine you are introduced to a new application and you would like to know more about it -- how it works and how it is built. This could be because you have to debug or extend it, or just because you just want to know how it works to get some ideas for your own projects.

The "Web Developer Toolbar for Firefox" (see Resources) is a great Firefox extension that lets you quickly inspect and modify a Web site or Web application. It shows up as a separate toolbar or in the context menu. Say you are on the http://www.ibm.com/support/ site and want to quickly identify which classes and ids are used throughout the site. Just go to Information > Display ID & Class details and you will see all ids and classes inline, directly in the document. If you are following along with these examples, you will see that this quickly reveals, for instance, what the structure of IBM's left-hand navigation looks like.

Figure 1. IBM's left navigation including id and class details

There are other great outlining features available as well. For example, you can outline all tables (none on ibm.com!) or all block-level elements. That way you can easily see how the div elements are laid out on the screen -- a great tool when you are developing a new site.

But there is more -- especially for testing. You can easily disable JavaScript, cookies or styles to check if the Web site still works, or how it will appear to a screen reader application or a search engine. Disabling images and displaying all alt tags quickly reveals usability problems, or just gives you a great deal of information about the images used on a page.

Another great feature, especially for testing the security of an application, is in the Forms section of the toolbar. Here you can not only inspect forms, you can also try to trick JavaScript validation by making form fields writable, by removing the maximum length of text fields, or by changing select dropdowns into text input fields. That way, testing if an application still works if the data is modified is really simple and does not require any modification of the source code. Go to Forms > Convert Form Methods > GETs to POSTs to modify the behavior of the Search form in the masthead on ibm.com. Figure 2 shows this step:

Figure 2. Search form detail

If you now enter a search term and press the Search button, you do not receive a result list -- rather, you are redirected to the Help page. This is the desired behavior for the ibm.com search engine.

Two other great features of the Web Developer Toolbar are the ability to view and edit cookie information using a very convenient interface (Cookies > View Cookie Information) and to view all JavaScript that is used on a page (Information > View JavaScript). This last feature includes both inline scripts and dynamically loaded scripts, so a search finds results in both these spots.

Before you read on, take some time to explore all the features the Web Development Toolbar offers and you will find it hard to work without it in future. The Internet Explorer Developer Toolbar (see Resources ) offers similar features for Internet Explorer.

Exploring the DOM

Now that you have explored a static page, it's time to do some more dynamic stuff with one of the most powerful extensions that exists for JavaScript developers. If you have not done so yet, install the Firebug extension (see Resources) and restart Firefox to load it. From now on, you will have a separate panel that you can activate by clicking the small checkmark in the lower right-hand corner of your browser. Figure 3 shows the Firebug console. For a larger view of the figure, click here.

Figure 3. The Firebug console

The console requires quite a bit of memory, so you should enable it only for certain sites and when needed. It can also be enabled only for specific hosts -- this is useful for debugging only on certain test machines where you know you are going to develop code and need the power of Firebug.

Once activated, the different Firebug features are listed at the top -- for now, focus on the HTML option. It displays the HTML source code of the page in a format that is easy to read. You can collapse and expand sections, and use the powerful Inspect button to browse the DOM. It is important to note that the DOM that is displayed is the current DOM of the site with all dynamic changes applied. So if a script removes an element, it is also removed from the Firebug view.

Use the Inspect feature to select the Choose support type dropdown on the IBM Support page (http://www.ibm.com/support/). Once the element is selected, the DOM view is updated and shows the HTML code of the selected element. If you click on the various elements and edit them, you will see that changes are immediately available in the DOM and the rendered view. Go ahead and add an alert() statement to the onchange event handler, as Figure 4 illustrates:

Figure 4. Adding custom code using Firebug

Press Enter to save the change, and select some other entry in the dropdown. Voila, the message shows up. Please note that the change is not saved permanently -- as soon as the page is reloaded, the change is gone. This feature is especially useful to quickly test changes or modify the DOM to test script functionality. (This is discussed further in the next section).

You may have noticed that all CSS styles that apply to the selected element are shown in blue on the right-hand side of the Firebug panel. This is especially useful for dynamic changes by scripts and for CSS debugging, for example to find a spacing problem. The Layout tab gives an overview of the element's spacing and borders, and the DOM tab helps during JavaScript development, as it lists all DOM properties for the selected element.

Needless to say, Firebug can modify CSS styles as well as DOM properties, and the changes are immediately applied. Figure 5 shows Firebug's CSS inspection console:

Figure 5. Firebug's CSS inspection console

Debugging JavaScript

For a long time, JavaScript was not given the credit it deserves. Considered by many to be just a "toy" programming language, IDEs and debuggers were sorely lacking. There have been some solutions -- like the Venkman Debugger or IE Script Debugger (see Resources) -- but they were hard to use and did not offer a lot of features. Most developers continued to use alert() statements in their code and development often involved reloading the Web site and clicking through continually until the correct function was triggered.

Firebug, which has an integrated JavaScript debugger that offers breakpoints, variable inspection and execution of commands on the fly, changes all that. It is time to go beyond alert()!

In the first section of this article, you used the Webdeveloper Toolbar's Information > View JavaScript function to discover that the dropdown on the IBM Support Web site calls the IBMSupportDropdowns.selectChange(this) function, and you know that this function is in a script called "ddnav.js". Now choose the Script tab in Firebug, select the ddnav.js script from the dropdown, and navigate to the IBMSupportDropDowns.selectChange function. Set a breakpoint by clicking on the line number. Figure 6 shows this step; for a larger view, click here.

Figure 6. Setting a breakpoint in Firebug

Now, choose any element in the dropdown and see how JavaScript execution stops. By using any of the buttons in the menu bar -- or the shortcuts F8 (continue), F10 (step over), and F11 (step into) -- you can execute the code line by line.

On the left-hand side, Firebug displays the code; on the right side, it shows all defined variables and objects for the current scope. Clicking on DOM elements brings you directly to the HTML DOM view, and, as you did before, you can modify data on the fly. Hovering over variables in the source code shows their contents. New elements to watch are added by entering them to New watch expression and pressing Enter.

If you select the Console tab, code is executed within the context of the function where execution stopped -- this allows you to modify variable content or call functions on the fly. Errors produced in the Console or by any other part of the code are also shown in the Console. And selecting the error directly clearly points you to where in the code the error occurred.

There is no question that Firebug offers a much more natural way of working with JavaScript and that it offers great flexibility. Once you get used to Firebug, you will wonder how you could ever have written JavaScript without it.

Inspect communication between client and server

Web 2.0 applications communicate asynchronously in the background, and the data that is sent can be anything from JavaScript over JSON to XML. Since JavaScript code receives the data, the front end doesn't directly see any debugging data sent from the back end. Thus, such communication has to be inspected directly.

Choose the Net tab in Firebug -- in the background, the tool has already recorded all page requests for you:

Figure 7. Network traffic inspection using Firebug

The menu bar allows you to filter by request type, and the small triangles in front of the requests allow you to see the request and response headers as well as the whole response itself. The timing bars give an idea of any bottlenecks in the application.

There are many other ways of inspecting communication between the client and the server; for example, the Fiddler2 tool, Wireshark, Microsoft Network Monitor and many other tools do this. They are out of scope for this article, though, and may be handled in more detail in a future one.

Testing on a live site

Wouldn't it be nice if scripts could be applied easily to existing, live sites? This would be useful where there is no access to the source code of the application, where someone else owns the site, or where you just want to test new features without harming another site. For most of us, all three of these apply to Google result pages, which happen to be the focus of our next example. In a separate browser, do a search for something on www.google.com, and see how you can improve the results a bit.

One very convenient way to modify the DOM is to use a combination of the Firebug Console and the jQuerify Bookmarklet (see Resources). jQuery is a very small but powerful library that enables access and modification of the DOM using CSS3 syntax. More details about jQuery can be found in the article "Simplify Ajax development with jQuery" (see Resources).

The bookmarklet allows you to inject jQuery into any existing page, so the power of jQuery can easily be used within the Firebug console. You should do this now on your Google results page. jQuerify the page, then open up the Firebug console and enter the following code and execute it (this is just one line!):

$('#sd').append(' > Search at <a href="http://search.yahoo.com/search?p=' 
+ encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>');

Your results should be similar to Figure 8.

Figure 8. Enhancing Google with jQuery

This adds a new link to the search bar that allows you to perform the exact same search against Yahoo. Unfortunately, you have to run jQuery on the page every time and the code has to be executed manually which is not very convenient. But developing the line of code that changes the page is simple, and variations of the code can be tested until it works perfectly.

Once it does work perfectly, you can use the Greasemonkey extension to permanently apply this short script every time you use Google. Greasemonkey applies what are called "userscripts" to a Web site or page every time it is loaded. To add a new userscript, right-click the Greasemonkey icon in the status bar and select New User Script. Enter a name, namespace and description. The includes list has to be changed to match all Google Search results. Figure 9 shows the steps in adding a new Greasemonkey script:

Figure 9. Adding a new Greasmonkey script

Now open any text editor and enter the userscript shown in the listing below:

Listing 1. Greasemonkey script extending Google

                
// ==UserScript==
// @name      	Yahoo Search on Google
// @namespace 	google_yahoo
// @description Adds a Yahoo link to the Google results page
// @include 	http://www.google.com/search
// ==/UserScript==
var jq = document.createElement('script');
jq.src = 'http://code.jquery.com/jquery-latest.js';
jq.type = 'text/javascript';
document.getElementsByTagName('head') [0].appendChild(jq);

// Wait for jQuery to be loaded
(function wait_jq()
{
	if(typeof unsafeWindow.jQuery == 'undefined')
	{
		window.setTimeout(wait_jq,100);
		return;
	}
	$ = unsafeWindow.jQuery;
	$('#sd').append(
		' &gt; Search at <a href="http://search.yahoo.com/search?p=' 
		+ encodeURI($('input[@name="q"]').attr('value')) 
		+ '">Yahoo</a>'
	);
})();

Once you save this script, the link is shown on every Google results page automatically. A great many userscripts which allow you to perform all kinds of modifications already exist. Go to userscripts.org to find many excellent userscripts.

A similar extension exists for Internet Explorer. It is called IE7Pro and, as the name implies, it only works on Internet Explorer version 7. But it offers a lot of features that that browser lacks, like enhanced tabs, mouse gestures, an ad blocker, and "Greasemonkey-alike User Scripts."

With these two extensions, you can apply small snippets of code to any Web site. This is useful for adding desired features to sites whose source code you can't access, but it is also useful if you want to quickly test (and present) some new feature on your own site, but don't want to touch the source code. Of course, this is limited to JavaScript only -- the ultimate way to inject content into a live site is to use a proxy, but that too is out of scope for this article, and is a much more advanced topic, besides.

Summary

This article has covered a variety of different ways of working with Web pages, scripts, and applications. You have seen how you can inspect a site using the Web Developer Toolbar, and how to modify content as needed using the Firebug extension. You also got an idea of how JavaScript can be debugged easily using breakpoints and modern object inspection, and even how to modify contents permanently to improve your own experience.

Needless to say, each of these tools could easily provide fodder enough to fill up a whole article, or even a series. But before you can get to those kinds of advanced features and capabilities, you have to start using the tools and getting used to them -- and that is what I hope this article has inspired you to do.

Share this...


	Digg this story

	Post to del.icio.us

	Slashdot it!

Resources

Learn

The Web Developer for Firefox extension adds a toolbar to Firefox with various Web developer tools, giving you the ability to inspect markup and JavaScript, and even modify same on the fly.
Firebug is one of the most powerful Firefox extensions for JavaScript developers; use it to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
The Internet Explorer Developer Toolbar allows inspection of the DOM within Internet Explorer 7.
The Greasemonkey for Firefox extension for Firefox applies custom JavaScript to pages after they are loaded. You'll find a repository of these at userscripts.org
IE7Pro extends Internet Explorer 7 with useful features and also allows execution of custom scripts after the page is loaded. There is also an ieScripts script repository for IE7Pro userscripts.
jQuery is a small JavaScript library that allows accessing and modifying the DOM using CSS3 selectors. The developerWorks article Simplify Ajax development with jQuery (Jesse Skinner, April 2007) is a great introduction to jQuery and jQuery extensions. The jQuery Bookmarklet lets you jQuerify every page.
The developerWorks article Real Web 2.0: Quick and dirty Web applications with bookmarklets (Uche Ogbuji, Aug 2007) provides an introduction to bookmarklets.
The developerWorks article Considering Ajax (Chris Laffra, May 2006) offers an introduction to AJAX and technologies.
The Venkman JavaScript Debugger for Firefox aims to provide a powerful JavaScript debugging environment for Gecko-based browsers.
The Microsoft Script Debugger allows debugging Scripts within Internet explorer, while the MSDN IEBlog post Script Debugging in Internet Explorer outlines how to enable script debugging in Internet Explorer.
Need to examine communications in a Windows environment? The Fiddler2 Tool acts as a local proxy and allows inspection and modification of all communications, Wireshark inspects all traffic on the wire while Microsoft Network Monitor inspects all traffic on network interfaces.
Get the resources you need to advance your skills in the Web development area on developerWorks.

Get products and technologies

Download IBM product evaluation versions and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.

Discuss