Firebug Lite

From FirebugWiki

Revision as of 04:01, 3 December 2009

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

The solution is Firebug Lite, a JavaScript file you can insert into your pages to simulate some Firebug features in browsers other than Firefox.

Firebug Lite creates two variables, firebug and console, in the global context and does not affect or interfere with HTML elements that aren't created by itself.

Latest Version: 1.2.3 (2009-05 ChangeLog)

Screenshots

• IE
• Opera
• Safari

Installing Firebug Lite

Static on-line installation

Insert this line of code into any page that you want to contain Firebug Lite:

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

Firebug Lite as a bookmarklet

Enter the following code into your address bar to use Firebug Lite on any page. You can also copy the code into a bookmark on your toolbar.

javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Static off-line installation

Download the source files and save them to a folder in your site's directory. Include firebug-lite-compressed.js or firebug-lite.js in the page(s) that you want to contain Firebug Lite. Search for "firebug-lite.css" in the JavaScript file and replace it with the location of the firebug-lite.css file you downloaded.

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

Configuring Firebug Lite

You can change the height of the Firebug Lite UI with the following code.

<script type="text/javascript">
firebug.env.height = 500;
</script>

You can also use your own CSS file to customize Firebug Lite's UI:

<script type="text/javascript">
firebug.env.css = "/myown/firebug.css"
</script>

Firebug Lite API

console

Firebug Lite supports all of Firebug's basic console methods except console.assert, console.group, console.groupCollapsed, console.groupEnd, console.profile and console.profileEnd.

Firebug Lite does not support string substitution patterns, it simply concatenates arguments together.

firebug.watchXHR(request)

Use this method to watch the status of XmlHttpRequest objects.

var request = new XMLHttpRequest();

firebug.watchXHR(request);

request.open('GET', 'http://getfirebug.com', false);   
request.send(null);

firebug.inspect(node)

Use this method to inspect DOM elements.

firebug.inspect(document.body.firstChild);

Notes

Some browsers already declare the console variable. If you observe errors in Safari, for instance, use the console commands in this fashion:

firebug.d.console.cmd.log("test");
firebug.d.console.cmd.dir([ "test" ]);