What is Firebug Lite?

videos

articles

blogs

comments

downloads

sitemap

Hiveminds | Tue, 2008-04-29 15:03 tags: Developer Zone, Firebug, News

leave a commentsubscribe to feedfriendly: printshare: delicious, digg, reddit, icerocket

There have been a few websites giving notice to Opera's soon to come developer tool, Dragonfly. Dragonfly is a javascript debugging tool for the Opera web browser. Microsoft is also coming out with its own javascript debugger in a developer tools package. But is having a bunch of debugger tools in each web browser what developers want? Probably not. Luckily The makers of Firebug have come up with a solution. It's called Firebug Lite.

Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari? If you are using


console.log()

to write to Firebug's console, you'll wind up with JavaScript errors in these other browsers, and that's no fun.

The solution is Firebug Lite, a JavaScript file you can insert into your pages to simulate the Firebug console in browsers that are not named "Firefox".

Installing Firebug Lite

First, download firebuglite.zip and unzip it into any directory on your web server. Then insert this line of code into any page that you want to contain Firebug:

<script language="javascript" type="text/javascript"
            src="/path/to/firebug/firebug.js"></script>

If you don't care to simulate the Firebug console, but you want to prevent calls to


console.log()

from causing errors, then just change the file name in the snippet above to "firebugx.js", like so:

<script language="javascript" type="text/javascript"
            src="/path/to/firebug/firebugx.js"></script>

If you don't want to install Firebug Lite, but you just want to avoid those annoying JavaScript errors, grab firebugx.js here and just copy and paste it into your code.

Using Firebug Lite

Firebug Lite won't intrude on your page until you open it yourself. Just hit the trusty F12 key to open the console - it will appear at the bottom of the page just like the real Firebug.

You'll soon get tired of hitting F12 after every time you reload the page. If you want the Firebug console to be open every time you load the page, just add


debug="true"

to the html element of your page, like so:

Using the Command Line

Firebug Lite also contains a command line, just like its big brother. You can use the same shortcut you use in Firebug to focus the command like, , Ctrl+Shift+L (or ⌘+Shift+L on Mac).

Happy Publishing!