Fortunately Firefox

Web tools have changed a lot since their birth a little over a dozen years ago.

If you look at the whole front of web development, not just one piece of it - it is a huge front that has been progressing steadily for years.

The first web browsers did not have:

AJAX

AJAX stands for asynchronous JavaScript and XML and that is just what it is. AJAX is like DHTML on steroids. Unlike back in the 1990s when DHTML was trying to make its way, the JavaScript DOMs used by leading browsers are more compatible, despite lingering fundamental differences. For the latter, today there exist very powerful libraries that separate JavaScript programs from these differences - while integrating them with the capabilities inherent in the modern browser web capabilities.

CSS

Cascading StyleSheets are rule-based instructions for controlling the visual appearance of a web page - be it written in HTML, XHTML, or constructed as a raw XML data/information document.

DHTML

DHTML stands for dynamic HTML. Very simply put, DHTML is the phenomena that occurs when a JavaScript program in a web browser manipulates the contents and/or structure of a web page by interacting with it as if it were a program data structure, through something called the DOM, the document object model.

DOM

Document Object Model; the hidden data structure of a web page - replete with both information and semantics, it is like a parse tree for a program. However, instead of describing a program - it describes a web page. JavaScript programs view the web page as a data structure; this data structure in particular, actually.

JavaScript

The scripting scripting for web browsers that resembles a highly extended form of the C language - which is really a dynamic language more akin to LISP under its covers. Many pages use it. It is the key to popular derived technologies such as DHTML and AJAX.

Java applets

Java applets are still supported in all major browsers, thanks to Sun's Java plugin. Through Netscape's LiveWire feature, JavaScript programs and Java applets can interact with each other - sharing the goods of each other's realms on a web page.

structured graphics

The web has had graphics since its inception or it probably would not have taken off the way it has. Modern web browsers include support for scalable vector graphics (SVG), which is another XML document standard - for graphical image drawings, graphs/diagrams, and illustrations. The canvas element that was introduced in 2005 is a way that JavaScript programs can draw images in a div element of a web page. Both canvas elements and SVG graphics can be directly controlled, manipulated, and generated by JavaScript programs in a web page.

Today's browser, Firefox in particular, has all these things going on for it. And JavaScript programs can see and interact with all these assets of sophisticated web pages.

This creates a lot more complicated environment than existed a decade ago.

So, there needs to be a web page debugging tool that not only sees the JavaScript and the traditional parts of the web page, but some of these relatively newer parts as well.

Fortunately, FireBug can and does see a lot of these directly. So you, the web programmer can too.

FireBug - JoeHewitt.com:

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, error console, command line, and a variety of fun inspectors.

It is kind of interesting that someone has created a powerful enough tool to herd this menagerie of neat capabilities that have cropped up around JavaScript in the past eleven years.

JavaScript is enjoying its second decade of use now.

A useful debugger for JavaScript not only has to let one interact with and observe the execution of code. It also has to let one interact with and observe different aspects and views of the structured information of a web page that JavaScript programs operate upon.

FireBug does that.

FireBug lets you:

1. Set breakpoints in a JavaScript program.
2. Monitor runtime errors.
3. Perform logging easily within a program.
4. Perform unit testing with JUnit-like assertWhatever methods.
5. Find definition errors in the page.
6. Monitor events in the page, as they unfold. Given that many pages are interactive, there is a lot going on. Adding to that DHTML, and there is even more happening! Hard to debug what you cannot see directly, so now you can.
7. Monitor AJAX requests by letting you observe the traffic they generate.
8. Study and change the DOM for the web page directly.

Sounds like FireFox is a revolutionary tool.

Not everything is perfect in something so advanced, so early on, however. As the author of FireBug - and the Venkmen JavaScript debugger author too, as it turns out - points out: some of these capabilities are things that Firefox/Mozilla designer-programmers did not set out to support. And there are still some bugs in various parts of Firefox that get in the way of such a demanding tool as this.

I hope that Firefox's designers look hard at the need of this tool and Venkemen as they work on post-2.0 versions of Firefox. It would be great if they could see what they can do to make this guy's life easier - so he can do everything he can possibly think of to make web programmer's lives easier.

In the end, that is what makes users happier. Or at least makes it possible to bring them the utmost in exciting designs and powerful capabilities.