Slashdot Mirror
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.'"
You're definitely at a disadvantage as an AJAX developer when you are not using it.
/., there goes my advantage.
Well, now its on
Nobody writes jokes in base 13. - DNA
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.
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.
> 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.
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.
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?
-> Sometimes, you just gotta break free from the shackles of proprietary code.
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.
python>>> q="'";s='q="%c";s=%c%s%c;print s%%(q,q,s,q)';print s%(q,q,s,q)
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!