Debugging CSS, AJAX and DOM with Firebug

prostoalex writes "Joe Hewitt of Parakey in the latest Dr. Dobb's Journal provides a detailed overview of the Firebug extension for Firefox: 'Firebug breaks the page down into a set of tabs that depict its most important aspects — HTML, CSS, JavaScript, the DOM, network activity, and a console for errors and log messages. No tab is an island; Firebug lets you browse code just as you browse the Web by presenting objects as hyperlinks that can take you from one view to another.'"

Good but no cigar

[WarwickRyan]

Firebug is an excellent and extremely useful extention, however alone it does not provide everything you need.

Combine Firebug with the Web Developer Toolbar ahref=https://addons.mozilla.org/firefox/60/rel=ur l2html-27791 [slashdot.org]https://addons.mozilla.org/firefox/60/ > and the included DOM Inspector and you've got yourself an excellent debugging environment.

Link to old extension

[jhewitt]

The article links to the wrong page for Firebug, it is currently pointing to the old version of the extension (0.4.1). Firebug 1.0 beta is a dramatic step ahead of 0.4, and you can get it at http://www.getfirebug.com/ [getfirebug.com]

It would be a shame if everyone installs 0.4 and misses out on all the great new stuff in 1.0.

Re:Good but no cigar

[jhewitt]

The DOM Inspector is not part of the Web Developer extension - it is included with Firefox itself. Web Developer simply includes a shortcut to DOM Inspector.

DOM Inspector was actually written by the same person who wrote Firebug: myself, 6 years ago. There is no reason to use DOM Inspector any longer. Firebug does everything it does and more, but with a much more pleasant and modern user interface.

Re:Good but no cigar

[jhewitt]

> DOM Inspector's excellent for javascript debugging, as you can use the full screen easily and can switch windows fast (extremely useful for debugging the tangle of JS in some webapps).

Perhaps you haven't tried Firebug 1.0, which allows you to open Firebug as a separate window. Versions prior to 1.0 did restrict you to a panel at the bottom of the browser.

Re:10 css errors on this page

[jasonwea]

This addon does not appear to be Free (as in speech) and also only runs on Windows.

I much prefer HTML Validator [skynet.be]. I find both the Tidy and W3C validators incredibly useful. The Tidy function to clean up existing markup is also rather handy.

Re:Venkman

[jimmy_dean]

Venkman doesn't hold a candle to Firebug. Firebug is fast, easy, nice looking, and blows the features of Venkman out of the water. Give it a try, you'll find yourself say Venkman...what's that?

Re:Exellent tool but, but not for web developers

[kae_verens]

Are you totally mad? How can something as useful as this do anything but increase productivity? Today, for example, I needed to find out why a certain element in a layout was screwing up the design. All I needed to do was turn on Firebug's inspector, click the element, and read through the list of specific CSS lines that affected that element, and there it was! Total time wasted - 3 minutes. If Firebug had not been installed, I would have had to read through three CSS sheets, inspecting each line and figuring out if it could affect the element. Total time wasted could have been measured in hours, then!

Re:Not only for development

[maxume]

If you don't feel like installing the extension, you can get by with a bookmark:

http://www.squarefree.com/bookmarklets/webdevel.ht ml#shell [squarefree.com]

These also come in handy:

http://www.squarefree.com/bookmarklets/zap.html [squarefree.com]

Zap Style Sheets can make myspace quite a lot easier to read.