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.'"

Comments

Perfect Tool

[RotHorseKid]

You're definitely at a disadvantage as an AJAX developer when you are not using it.

Well, now its on /., there goes my advantage.

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-27791https://addons.mozilla.org/firefox/60/ > and the included DOM Inspector and you've got yourself an excellent debugging environment.

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:Good but no cigar

[Aladrin]

Please allow me to kiss your feet. ;)

But seriously, Firebug (and the webdev extension) have made my job a LOT easier. (And my co-workers, too.) Problems that took me 30 minutes to an hour in the past to find, I can now find them in seconds. It's been a god-send. Thank you so much.

Re:Good but no cigar

[Paradise Pete]

There is, alas. It works with my chosen browser, SeaMonkey, whereas Firebug doesn't

What difference does it make what your browser of choice is? You're developing, not browsing.

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/

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

debug

[mastershake_phd]

I debug with chemicals, and sometimes a hammer.

10 css errors on this page

[HxBro]

I've been using firebug for a while, it's great, shows up errors on pages quickly and easily. This page alone has 10 CSS errors apparently :)

Between firebug and the html validator extension (requires html validator) http://www.htmlvalidator.com/firefoxext.php you can quickly pick up and find the errors on the page.

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. 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?

Not only for development

[aymanh]

Not only does Firebug provide excellent tools for debugging web applications, but it also has facilities for modifying web pages on the fly. Sometimes there is an annoying div on a webpage that I want to get rid of while reading, so I open the Firebug console and set its display property to none. There may be other extensions that provide similar features (Adblock Plus, Nuke This); however, the JavaScript console in Firebug is the ultimate tool for running your own code on 3rd party web pages, for those who know Javascrpt, that is.

Furthermore, the JavaScript console can be very helpful for those starting to learn JavaScript, like how the Python console is for Python beginners.

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

These also come in handy:

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

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

Very Useful

[antialias02]

Rarely a day goes by when I don't find some use for Firebug, but I concur with the sentiment that the Web Developer's Toolbar is often needed to create a powerhouse set of dev tools for the Web. If all you have are these two, you're a head and shoulders ahead of the game.

Re:Exellent tool but, but not for web developers

[Azarael]

Not everyone has the option of integrating a whole ajax toolkit into their work. Anyway, ajax is far from the only thing that firebug is useful for. The error reporting makes it a lot easier to track down and repair general javascript problems than with the existing console.

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!