Level: Intermediate Michael Baierl (mbaierl@at.ibm.com), Corporate Webmaster,
IBM
11 Mar 2008
Updated 11 Mar 2008 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.
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(
' > 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.
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
About the author  | | | 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. |
Rate this page
| 
