A strong reason for using Firefox for web development, after all of the adherence to standards arguments have subsided, is the tool Firebug. It’s an add-on that allows real-time manipulation of web pages after they’ve been loaded. All manner of handy tools such as investigating the HTML as loaded or as rendered, debugging JavaScript, and even monitoring the timelines of loaded elements to help tweak page loading. Oh, and it’s free.

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.

Any web developer who has spent countless minutes tweaking, publishing, and reloading HTML or CSS or JavaScript for a page because layouts are just a little wrong can attest to the value of Firebug’s ability to modify the page in real time. Tweaking styles or scripts or even HTML, and the applying the successful changes is immeasurably valuable.

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.

There are some limitations of what Firebug Lite can do, such as edit the HTML or JavaScript.

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.

By bookmarking a little bit of JavaScript, or embedding a simple line in your HTML, Firebug Lite is made available to the loaded page.

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.

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

You can also download the JavaScript and add it to your project locally, if that’s the preference.

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 the Script tab, and review (but not edit or debug) the JavaScript included with or on the page.
• Click on the DOM tab, and notice the entire browser object model is available for review.
• Click on the Console tab, and enter some JavaScript commands (like $$(‘p’)[1] to print the contents of the first paragraph). Fire-off any JavaScript on the page with the console, with much of the same functionality as the full Firebug in Firefox.

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.