Hello World

Features

Both Firebug and Opera Developer Tools (Dev Tools from here on) have a similar feature set and even a similar interface. There are some differences, though: Firebug has some very useful features which are completely missing in Dev Tools.

Firebug can monitor network traffic: you can use it to see how much data was transfered for the page, in what files and how long it took. It also lets you see the headers and a thumbnail of images and such. It also tracks XMLHttpRequests.

Firebug also has a JavaScript console which you can use to run JavaScript commands and it also displays errors such as page not found when doing an XMLHttpRequests. You can run JS commands in Opera by writing them to the address bar with prefix javascript:, but it's much easier to run multiple commands with the console in Firebug... although I can't think of any real use for it at the moment.

Even more, Firebug lets you set breakpoints and watches to the scripts on the page to help debug them. Setting breakpoints is just a matter of clicking the line you wish to set the point to in the script and when you reload the page, the script will halt execution on the breakpoint and you get the options of continuing, stepping into, over or out... Everything you'd probably want from a debugger.

Finally, Firebug has "Inspect" which you can use to quickly find the code related to an element on the page by just clicking it.


There's one feature in Dev Tools that's not in Firebug: Cookies.
You can see what cookies the page has set and change their values and set new cookies.

Usability

Firebug can dock to the sides of the browser; Dev tools just floats around in a window. This makes Firebug easier to use as it's constantly visible and easy to resize or such. You can achieve similar effects with dev tools if you make the actual page window smaller but it still isn't as easy to use as docking and requires some manual adjustments.

Both have HTML and CSS views, but Firebug gives CSS a nice formatting and syntax highlight, while dev tools just does it for HTML. In Firebug you can also click on the HTML element and immediately see the CSS styles that affect it. You can also disable CSS styles just by clicking, whereas in Dev Tools you have to go to the CSS tab and find the appropriate style and comment it out or remove it completely.

I wasn't able to get XMLHttpRequest tracking working at all in Dev Tools which is a big issue. Enabling XHR Log and reloading a page did nothing and afterwards Dev Tools window wouldn't even work properly.

Conclusion

Firebug 10, Dev Tools 1.

Opera still has a lot of work to do.
You have to keep in mind, though, that Opera just released the Developer Tools in their 9.20 version. They've been available as a separate download for a while longer, but 9.20 added it to the menus. However, Firebug has been available for quite a while already.


If there's anything I missed, let me know. I haven't used either of these for very long yet.