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

Exellent tool but, but not for web developers

[Anonymous Coward]

If you enjoy using FireBug, it is likely you are not really productive...

Don't get me wrong, I think the tool is excellent, but do you really want to go bug chasing at this low level of abstraction ? You can easily waste hours debugging like this, figuring out what exactly happened (or didn't happen) ...

I think you are better off using a high level AJAX toolkit like echo2 [nextapp.com] or Wt [sf.net] instead, blame their developers for any JavaScript or other unexpected trouble, and let developers of these toolkits enjoy FireBug in ironing out these bugs.

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 [htmlvalidator.com] you can quickly pick up and find the errors on the page.

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 [mozilla.org], Nuke This [mozilla.org]); 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.