Dynamic Web Development with Seaside

20.7Debugging AJAX

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.

On one side we have Smalltalk and Seaside, on the other hand you have the web browser and JavaScript. We assume that you are familiar with the tools available in Smalltalk to debug code, to set breakpoints, to inspect objects or to log output. These tools behave the same way when you are using AJAX. What should you do, when the error does not happen in Smalltalk but on the JavaScript side? What should you do if the browser shows an error message? How can you investigate the situation if the browser does not do what you expect?

Firebug: Web development evolved

There are tools available for most modern web browsers to help you to debug JavaScript code and to inspect XHTML DOM nodes. Here we list some of the most popular tools:

Firefox Firebug
Opera Dragonfly Introduction to dragonfly
WebKit (Safari, Chromium) Web Inspector
Drosera Debugger
Microsoft Internet Explorer Developer Toolbar
Script Debugger

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.

The console shows the AJAX requests and responses exchanged between Seaside and the web browser.

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 checkbox
onChange:
(html logger info: 'Before AJAX'),
(html updater
id: listId;
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 , operator to concatenate multiple script snippets. Of course this also works with other JavaScript snippets, not just with logging statements. So we display the strings Before AJAX and After AJAX right before and after the updater is executed. Furthermore we added another logging statement to 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.

Logging to the Firebug console

Logging. The logging facility only works when using Firebug or the Safari Web Inspector. It might cause JavaScript errors and completely break your code if you try to execute the logging statements within other browsers. Other browsers do not provide the necessary interface to emit log statements.

HTML. Another useful tool is the Firebug HTML tab. The view here is somehow similar to what you see in the source view of the Seaside halos. In Firebug however, you always see the up-to-date DOM tree, even if it has been transformed by JavaScript. For example, if you click a checkbox in the todo application, you will see which parts of the DOM tree change. Make sure that you choose Firebug to highlight and expand changes in the options, so that you don’t miss an update operation of your JavaScript library.

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.

The inspector displays an up-to-date view on the DOM tree. Changes are automatically highlighted.

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.

Script. The Script tab is more interesting for programmers. Here you can find the JavaScript files that are used by your application. You can set breakpoints and step through the code. If you encounter a JavaScript error, you will notice that the Firebug icon in the status bar turns red. This means that you will find a detailed error description in the console. If you click the description, you end up in the debugger investigating the exact cause of the problem. Again, you are able to look at (and change) variables and step through the code.

DOM. The DOM tab shows the complete object graph of the JavaScript engine. You can use it to walk through the objects that the web browser and the JavaScript libraries offer you.

Net. Last but not least the net tab displays a list of all the files your web application depends on. These files consist of html files, style-sheets, JavaScript files, and images and other resources. The tab gives detailed information about how long it took to download the data, which is essential information if you want to optimize your application.

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.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.