Firebug in Other Browsers
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.
Firebug Lite Bookmark
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.
Firebug Lite Script
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.
Using Firebug Lite
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.
- Open the Firebug Lite console.
- Click on the HTML tab, if it isn’t selected already. The HTML tab is likely where most of the review and tweaking will take place.
- Select the Inspect button.
- Wave the mouse around the web page; notice how a selection box follows the mouse, outlining the available selection, and how the HTML view shows what makes that selection.
- Click on a selection in the web page. This will end the Inspector (as will clicking the Inspect button again), leaving the selection in place when moving the mouse.
- In the Firebug Lite console, open and close the tree view and change the selection as desired. Notice the selection in the webpage is highlighted to help show where you are.
- On the right side of the console (in the HTML tab, still), notice the Style is shown.
- In the Style pane, click and change the styles, and watch the changes happen as they’re typed!
- Click the CSS tab and select one (if there’s more than one) of the CSS, and make the same changes here, if desired.
- Click on the DOM tab, and notice the entire browser object model is available for review.
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.