For now we have a fully functional todo application. However, before we continue to improve the application further, we would like to have an in-depth look at how to debug an AJAX application. The challenge here is that there are many different technologies being combined together.
|Opera||Dragonfly Introduction to dragonfly|
|WebKit (Safari, Chromium)||Web Inspector|
|Microsoft Internet Explorer||Developer Toolbar|
In this section we are going to concentrate on using Firebug, an extremely powerful plugin for the Firefox browser.
Launching Firebug. While viewing the todo application, open the Firebug console. There are two ways to do this: by clicking on Tools > Firebug > Open Firebug; or by clicking on the Firebug icon on the status bar — this will be a green checkmark or a ‘bug’ icon depending on your version of Firebug. If you have a big screen you might want to detach Firebug from the main window, to have more space for your application.
Console. Click on the Console tab. This may prompt you to enable it before proceeding; if this is the case, you should also reload your page. Now click in the todo application on the checkboxes, and observe how the asynchronous requests are logged in the console. By clicking on the log entries you can further inspect the header fields, and the contents of the request and response objects. Note that this tool is indispensable for observing how AJAX requests are sent, since there is no other way to observe it on the client side.
Another interesting feature of the console is the ability to display custom information. For example you can temporarily replace the code that renders the checkbox with the following code:
(html logger info: 'Before AJAX'),
triggerForm: (html element up: 'form');
callback: [ :ajaxHtml | self renderItemsOn: ajaxHtml ];
onComplete: (html logger warn: 'After Update')) ,
(html logger error: 'After AJAX');
value: anItem done;
callback: [ :value | anItem done: value ].
Note that we are using the
onComplete: event handler of the updater. Clicking on a checkbox produces the 3 logging statements in the sequence you see below. This demonstrates nicely that the AJAX request is really processed asynchronously: the text After Update appears last in the list of log messages.
In the same window, it is also possible to modify the XHTML nodes and instantly see the effect on the page. You can create, delete and edit attributes and see how the visual appearance of the page changes. If you are looking for the XHTML node of a specific part in your application, click on Inspect (or the box-and-pointer icon in recent versions) and select a checkbox in our todo application. Firebug will display the code that defines this control.
CSS. The CSS tab in Firebug is another valuable tool, that graphic designers find particularly useful. There you will see all the CSS rules that are used on the current page and you can edit and configure them on the fly.
This section has only given you a brief overview of the features available in Firebug to help you inspect and debug your applications. Visit the Firebug website at http://getfirebug.com/ for more information on how to take advantage of all the capabilities of this tool.