Firebug Lite

From FirebugWiki

Revision as of 21:30, 13 September 2009 by Peregrino (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<a href="lite/screenshot_1.png"><img src="lite/screenshot_1_thumb.png" class="floatRight" style="border:3px solid #ccc; padding:3px;" /></a>

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 variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.

Screenshots:

  • <a href="lite/ie.html">IE</a>
  • <a href="lite/opera.html">Opera</a>
  • <a href="lite/Safari.html">Safari</a>

Latest Version: 1.2.1 (2008-09 <a href="">CHANGELOG</a>)

Contents

Installing Firebug Lite 1.2

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:

<a href="javascript:var firebug=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);">Firebug Lite</a>

Configuring Firebug Lite

           Height of the firebug lite form is resizeable in latest version;
  <script type="text/javascript">
  firebug.env.height = 500;
  </script>
            
           Also, developers can use their own css file;
  <script type="text/javascript">

  firebug.env.css = "/myown/firebug.css"
  </script>
            


Using Firebug Lite Offline

Download the <a href="http://getfirebug.com/releases/lite/1.2/">source</a>

Import <a href="/releases/lite/1.2/firebug-lite-compressed.js">firebug-lite-compressed.js</a> or <a href="/releases/lite/1.2/firebug-lite.js">firebug-lite.js</a> 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/firebug-lite.js"></script>

Commands

Now FBLite supports <a href="http://getfirebug.com/console.html">all basic commands</a> of Firebug.

firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.

    var req = new XmlHttpRequest;
    firebug.watchXHR(req);

firebug.inspect: Now elements can be inspected in javascript code:

 firebug.inspect(document.body.firstChild);
            

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.cmd.log("test");
    firebug.d.console.cmd.dir([ "test" ]);


Notes

           <p>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.cmd.log("test");
    firebug.d.console.cmd.dir([ "test" ]);
<p>Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't create by itself.

Personal tools