The trouble is that Firebug only works in Firefox. Webkit browsers, like Safari and Chrome, have its built-in web inspector and developer tools. IE has a plug-in and can be attached to Visual Studio, if you have it. But neither beats Firebug’s abilities.
Using Firebug to tweak layouts is incredibly easy. It provides auto-complete and context-aware value assistance. It shows the cascading of style sheets, so you can troubleshoot where the style’s gone amok or see where a little tweak has a different-than-intended impact. You can quickly toggle styles off and on and see the change immediately. This doesn’t work nearly as well with any of the other browsers’ included tools.
Now you can have Firebug in all of your browsers. Well, most of Firebug.
It is nearly just as powerful as the Firefox Firebug if you’re looking for a tool to help review or tweak style layouts. Most often, working on the different browsers’ styles is the biggest difference.
Adding a bookmark to Firebug Lite will enable you to add Firebug Lite to most web pages. Visit the web page to use, hit the bookmark, and the page will reload (if necessary) with a Firebug Lite icon in the corner (or an open Firebug Lite console if you left it in that state). Clicking the icon will open the Firebug Lite console, which looks a lot like the Firefox Firebug console. This is added as a div at the end of the page.
If you have direct control over the web page, you might add the following bit of HTML to your page, and Firebug Lite will be added as if loaded from the bookmark. This is very useful for developers who might be working on pages that couldn’t handle a reload, or who would be able to remove the script before deploying their application.
Loading a page with that bit of script in it will have the same Firebug Lite icon (or open console) as reloading from the bookmark does, except that it doesn’t require a second loading of the page to get it in place.
Once Firebug Lite is enabled, the HTML and scripts and DOM can all be inspected. The styles, however, can be viewed and edited, greatly reducing the cycle of development for laying out styles in different browsers.
For a quick example, try this quick test.
So, no more lamenting “If only I had Firebug I could fix that CSS so quickly!” Add Firebug Lite and tweak away in all of the browsers.