The Firebug debugger add-in for Firefox handles the entire stack of AJAX related technologies. Ever wanted to tweak the margins in your style sheet while you watch the changes? Profile a web page and see a visual representation of when scripts are loading and how big they are? Watch the XmlHttpRequest (i.e. AJAX) requests move over the wire in real time? You can do all this in Firebug, and of course you can step through your JavaScript code. At Falafel we use this tool in our consulting work and telerik recommends Firebug for use in web applications using their RadControl suite.
Firebug is an innovative tool that handles usual tasks you would expect from a combined DOM explorer, AJAX/JavaScript profiler, and JavaScript debugger. But it combines technologies in a new way that is definitely cool and a lot of fun to use. This will take a few blogs to talk about in depth, but this should get you started.
Firebug only installs and runs in Firefox. Get Firefox at http://www.mozilla.com/en-US/firefox if you don't already have it installed. In Firefox download and install Firebug from http://www.getfirebug.com/. Now run any page in Firefox and notice the green checkbox in the lower right hand corner. Click it to start up Firebug for the page you're on.
The Console tab is used for logging output. The logging statements can be embedded in your script or run interactively on the Firebug interactive JavaScript command line. The image below shows the special "dir" command line API dumping the contents of the "<body>" tag to the console. A series of "console" commands output with visually helpful icons. There's more on this tab that will wait for another blog (or jump ahead by checking out the API documentation at http://www.getfirebug.com/docs.html).
If you couldn't wait and are running Firebug right now, try clicking the Inspect button, then move your mouse on a web page. The HTML and Style tabs will display the corresponding markup in real time as you move. Click once on the page to stop inspecting. Notice the crossed out items in the Style window? The window is showing how styles are cascading and what styles are not in effect. Try double clicking a style value -- you can edit the value and see the results immediately! Also notice when your mouse cursor passes over a color or image tag that a thumbnail pops up. Very smooth...
Try clicking on the Edit button (next to the Inspect button). You can edit the HTML and see the results. Feel free to add a completely different tag like the image below reading "Modify HTML on-the-fly!!".
By the way, when you click the refresh button, all changes go away. The author of this tool, Joe Hewitt, mentions in his talk about the advanced features of Firebug (http://yuiblog.com/blog/2007/01/26/video-hewitt-firebug/) that this version of Firebug is not intended to be an editor, but more of an exploring and auditioning tool.
Speaking of auditioning new settings, what about style layout settings? The Layout tab shows the offset, margin, border and padding for each element you select. In the browser you will see rules and other visual metric devices overlaying the web page. Now try clicking one of the settings, say top padding for an image as shown below. You don't have to enter a number off the keyboard. Instead try the arrow keys to raise and lower values. That way you can keep your eye on the layout until it's just right.
Firebugs profiling features show you the JavaScript and XHR requests going over the wire. The example below is a demo using a set of telerik date controls using a RadAjaxManager to AJAX enable the whole process (thanks to John Waters for letting me steal the example). In the Net tab we can select to see all or only certain traffic. The image below shows all the JavaScript traffic; when it loads and how big each piece is. For the web resources that contain images you can pass the mouse over to see thumbnails. Click the plus sign to get the details like HTTP headers, requests and responses.
If we click the XHR tab we see only traffic initiated by the XMLHttpRequest object. XMLHttpRequest is a major component of AJAX, so this feature is very important for evaluating web site performance with and without AJAX, tweaking AJAX performance, and even checking XHR traffic for security vulnerabilities.
Firebug is after all a debugger. All the capabilities you expect like step over, step into, run to line, step out, conditional breakpoints, watches, and automatic local variable display are there. The conditional breakpoint window is a nice piece of UI programming in itself (see below).
Note: Thanks to Ramesh Theivendran for letting me steal the code for this XMLHttpRequest demo (I see a pattern forming here).
This has been the briefest look at a tool that is sure to set the bar for all web debuggers. In coming blogs I'll show Firebug in more depth, but until then I hope you try it yourself.