Firebug Lite

Every web developer that I know hates working with Internet Explorer, especially Internet Explorer 6.  Recently I’ve found a new tool to ease the pain of the web development community and make IE6 just a touch more bearable, Firebug Lite.

Firebug is by far one of the most useful tools I’ve found for web page design and development, but it only works in Firefox. But what do you do when, like me, you’re developing a site that needs to work in all browsers? Firebug Lite is the answer.

Firebug Lite is a simple line of JavaScript code you insert into your pages that gives you some of the functionality that Firebug offers. Techie put, “Firebug Lite creates the variable ‘firebug’ and doesn’t affect or interfere with HTML elements that aren’t created by itself.”

Simply insert this line of code into the page you need Firebug Lite on:

<script type='text/javascript'
      src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>

and if you’d like to configure it:

<script>
        firebug.env.height = 500;
</script>

Now that you’ve installed it on your page, it’s relatively simple to use. Simply load your page, you’ll notice that you have a Firebug window on the bottom half of your screen, and select the element you would like to edit. You’ll see all of the elements for the tag selected, even elements inherited from the browser, but you still can not edit anything. This is where Firebug Lite differs from Firebug.

To edit the CSS you must select the CSS tab. Note: you must also have some CSS loaded on your page to edit or you’ll get a ‘Access to restricted URI denied’ error You’ll see the existing tags on the left and a Run CSS box on the right. Test your news CSS code in that box by typing it and hitting the Run button located on the bottom. That’s all there is too it!

It may not be perfect, but it sure beats the old way: opening the code in notepad (or whatever editor you use), editing the code, saving the document, loading it back to your server and loading the page to finally see that the edits may or may not be perfect.

One final thing to note, before you go live with your newly edited page that Firebug Lite helped you complete, don’t forget to remove the JavaScript.

Popularity: 3% [?]