« Buttonator, AJAX Button Generator | Main | Ajax Tabs Content script »

Firebug, The Future of Javascript debugging with Firefox

Would you agree that the next generation of the Firebug Firefox extension is revolutionary ? The new Firebug 0.4, which is still under tests include many interesting features, will make debugging of Javascript applications more fun and easy. The new version will be mainly marked by the advanced javascript debugger, with breakpoints, then there is the new console log API. For example rather than having tons of alerts this is very practical to use :

What is interesting is that you can even use variable inside the log method similar to printf method

There is more colorful debug message that you can use and give you something like :

colorful-log.png

If you want to check the performance of a process you can use the Firebug timer, and this will be useful to have an idea about the execution time and help detecting resources consuming issues more easily.

Assertion are also available in the new API for example

assert-fail.png

There is another variant which is the assertEqual which accept a personalized message :

assertequal.png

There is more great new features such :

Command line

  • Command line evaluation now happens in the context of the window, so you can use syntax like "var a = 42;" to set global variables
  • The command line history remembers what you were typing if you hit up and then down again
  • Functions like $() from Prototype are no longer overridden by the FireBug equivalent

Inspector

  • In the DOM tab, you can expand array objects to show their items
  • In the DOM tab, you can expand function objects to show their source
  • In the DOM tab, long strings are truncated
  • In the DOM tab, you can expand array long strings to show their full value
  • In the Source tab, script, style, and link elements can be expanded to show their source
  • Control-clicking URLs will now open them in a new tab on Windows
  • Element links have a tooltip that shows their XPath

Tabs

  • When you re-load the page, FireBug will try to re-select the object was selected in the inspector
  • Each browser tab keeps its own FireBug state independent of other browser tabs (whether FireBug is open and which inspector tab is selected)
  • New Firefox windows and tabs always start with FireBug hidden
  • Disabling FireBug will automatically close it
  • Opening FireBug will automatically re-enable it if it was disabled
http://ajax.phpmagazine.net/upload/2006/05/firebug-thumb.png

The new Firebug is not yet available for public, the new development version is available just for testing purpose and since the first time I download it and today's update I noticed already lot of changes like the new API. I didn't cover here all the new features especially in the debugger and how to play with breakpoints ... but I loved the way to make it available simply as Javascript functions.

Unfortunately for other browsers, Firebug is for Firefox only. And personaly everytime someone point me to a bug and he's using IE for example, I simply install firefox to see what the bug is all about. There is certainly techniques which could help debugging with IE, Safari, and others... but personaly I didn't see something similar to Firebug.

For more information and install of Firebug : http://joehewitt.com/software/firebug/
Joe Hewitt, firebug's author : http://joehewitt.com/

Bookmark this article at these sites
Comments
1

Schweeeeeet!

2

really revolutionary !
It was very hard to debuge javascript with IE, but with firefox extension (life better),
Thanks Mozilla :)

3

FireBug and Venkman are the two mandatory tools you need when doing serious javascript work. Firebug is a nice nice tool.

4

Hi,

This is not related to this topic and I apologize for that; I was wondering if anyone knows of an AJAX mind mapping software. I came across it last week but have forgotten the website. I would really appreciate if anyone could help me find it.

thanks.

5

Cool,
it also can be used in php to debug. a class exists for doing that in a clean way, PEAR::Log

Other very interesting extensions are aardvark & web developper. very nice.

6

Why can’t I use Firebug at OS X? I have no problems with using Firebug on local html files under Windows XP, though. Is it with file permission or account restrictions?

Post a comment





(Email will remain hidden)





Please enter the security code you see here




Related entries
Email to a friend
Email this article to:


Your email address:


Message (optional):