Firebug Lite
Firebug is an extension for Firefox, but what happens 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 that are not named "Firefox".
Firebug Lite creates the variables "firebug" and "pi" and doesn't affect or interfere with HTML elements that aren't created by itself
Installing Firebug Lite
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 bookmarklet
Drag the following link to your bookmark toolbar and use Firebug Lite on any page:
Using Firebug Lite Offline
Download the source
Import firebug-lite-compressed.js or firebug-lite.js and pi.js into your site's directory. Find "firebug-lite.css" URL on the javascript file which you imported and replace this with offline address of firebug-lite.css file.
<script language="javascript" type="text/javascript"
src="/path/to/firebug/pi.js"></script>
<script language="javascript" type="text/javascript"
src="/path/to/firebug/firebug-lite.js"></script>
Commands
console.log(messageString): Write messages to the console.
console.log('Hello World!');
console.dir(someObject): Explore rich variable types with this command.
console.dir({ books:['Foundation','Tout se complique','Deniz'] });
firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.
var getData = new XmlHttpRequest;
firebug.watchXHR(getData);
* On some browsers, the console object is already declared. If you observe errors in Safari, for instance, use the console commands in this fashion:
firebug.d.console.log
firebug.d.console.dir
Obsolete?
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:
<html debug="true">
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).
Try it on This Page
Firebug Lite is embedded in this very page - hit F12 or Ctrl+Shift+L right now to try it.
Notes
On some browsers, the console object is already declared. If you observe errors in for instance Safari, use the console commands in this fashion:
firebug.d.console.log
firebug.d.console.dir
Firebug Lite creates the variables "firebug" and "pi" and doesn't affect or interfere HTML elements that aren't create by itself.