Sunday, October 22, 2006

Debugging web applications in Firefox

Finding errors in JavaScript on web pages can be a difficult task. In Internet Explorer you can in best case see the line number where the error occured.

I recently began using Firefox Javascript console for debugging web applications. Besides javascript errors, console also shows invalid properties of CSS stylesheets.
The console can be opened using Tools-JavaScript Console menu in Firefox browser. In the console you can see all the errors which occured, not only the last one as in IE. By clicking on error message, it opens a window with the script file where the error occured and marks the error line.




A strange thing I experienced with Firefox console is that it somehow caches XML-document nodes which results in "ghost" nodes. When I changed WIMBO Sametime chat application to use XML-formatted data instead of plain-text data, the Javascript console reported that the web browser still received the old plain-text data. The data was clearly not a part of the information received from the servlet, so I am still wondering why Firefox appended that data to the real data. Similar problem with ghost nodes happened when I replaced an empty "<RESPONSE></RESPONSE>" root node which caused problem in Firefox to "<RESPONSE><NONE>-</NONE></RESPONSE>".

4 comments:

Anonymous said...

If you think the JS console is good, you should really try the Firebug add-on.

https://addons.mozilla.org/firefox/1843/

Anonymous said...

Looks like a nice tool. I will try it out. JavaScript command line also sounds like a usefull feature, especially if it supports multi-line code.

Anonymous said...

The Web Developers Toolbar is a must have for doing any development work with Firefox.

Andrei Kouvchinnikov said...

Thank you Sean.
Link to Web Developers Toolbar:
http://chrispederick.com/work/webdeveloper/