Firebug Lite

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
Line 1: Line 1:
-
{{stub}}
+
[[File:Fb lite screenshot 1.png|thumb|right]]
 +
Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari?
-
<a href="lite/screenshot_1.png"><img src="lite/screenshot_1_thumb.png" class="floatRight" style="border:3px solid #ccc; padding:3px;" /></a>
+
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".
-
            <p>Firebug is an extension for Firefox, but what happens when you need to
+
-
            test your pages in Internet Explorer, Opera, and Safari?</p>
+
-
            <p>The solution is Firebug Lite, a JavaScript file you can insert
+
Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
-
            into your pages to simulate some Firebug features in browsers that are
+
-
            not named "Firefox".</p>
+
-
            <p>Firebug Lite creates the variable "firebug" and
+
'''Latest Version:''' 1.2.1 (2008-09 [http://getfirebug.com/lite.html CHANGELOG])
-
            doesn't affect or interfere with HTML elements that aren't created
+
-
            by itself.</p>
+
-
           
+
-
            <p>Screenshots:
+
-
            <ul>
+
-
              <li><a href="lite/ie.html">IE</a></li>
+
-
              <li><a href="lite/opera.html">Opera</a></li>
+
-
              <li><a href="lite/Safari.html">Safari</a></li>
+
== Screenshots ==
-
            </ul>
+
* [http://getfirebug.com/lite/ie.html IE]
-
            </p>
+
* [http://getfirebug.com/lite/opera.html Opera]
-
           
+
* [http://getfirebug.com/lite/Safari.html Safari]
-
            <p><strong>Latest Version:</strong> 1.2.1 (2008-09 <a href="">CHANGELOG</a>)</p>
+
-
           
+
-
            <!-- Installing Firebug Lite -->
+
-
            <h3>Installing Firebug Lite 1.2</h3>
+
-
            <p>Insert this line of code into any page that you want to contain
+
== Installing Firebug Lite 1.2 ==
-
            Firebug lite:</p>
+
-
<pre class="code">    &lt;script type='text/javascript'
+
=== Static on-line installation ===
-
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'&gt;&lt;/script&gt;</pre>
+
-
       
+
-
            <!-- Firebug lite as bookmarklet -->
+
-
            <h3>Firebug Lite as bookmarklet</h3>
+
-
            <p>Drag the following link to your bookmark toolbar and
+
-
            use Firebug Lite on any page:</p>
+
-
           
+
-
            <p><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></p>
+
-
            <h3>Configuring Firebug Lite</h3>
+
Insert this line of code into any page that you want to contain Firebug lite:
-
            Height of the firebug lite form is resizeable in latest version;
+
-
            <pre class="code">  &lt;script type="text/javascript"&gt;
+
-
  firebug.env.height = 500;
+
-
  &lt;/script&gt;
+
-
            </pre>
+
-
           
+
-
            Also, developers can use their own css file;
+
-
            <pre class="code">  &lt;script type="text/javascript"&gt;
+
-
  firebug.env.css = "/myown/firebug.css"
+
<pre class="code">
-
  &lt;/script&gt;
+
&lt;script type='text/javascript'
-
            </pre>
+
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'&gt;&lt;/script&gt;
-
           
+
</pre>
-
           
+
 
-
            <!-- Using Firebug Lite Offline -->
+
=== Firebug Lite as bookmarklet ===
-
            <h3>Using Firebug Lite Offline</h3>
+
With the following JS link you can use Firebug Lite on any page (you can copy it to create a bookmark):
-
            <p>Download the <a href="http://getfirebug.com/releases/lite/1.2/">source</a></p>
+
<pre class="code"> 
-
            <p>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.</p>
+
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);
 +
</pre>
 +
 
 +
=== Static off-line installation ===
 +
Download the [http://getfirebug.com/releases/lite/1.2/ source]
 +
Import [http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js firebug-lite-compressed.js] or [http://getfirebug.com/releases/lite/1.2/firebug-lite.js firebug-lite.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.
<pre class="code">
<pre class="code">
-
    &lt;script language="javascript" type="text/javascript"  
+
&lt;script language="javascript" type="text/javascript"  
-
        src="/path/to/firebug/firebug-lite.js"&gt;&lt;/script&gt;</pre>
+
src="/path/to/firebug/firebug-lite.js"&gt;&lt;/script&gt;</pre>
-
            <!-- Commands -->
+
== Configuring Firebug Lite ==
-
            <h3>Commands</h3>
+
Height of the firebug lite form is resizeable in latest version;
-
            <p><em>Now FBLite supports <a href="http://getfirebug.com/console.html">all basic commands</a> of Firebug.</em></p>
+
<pre class="code">
 +
&lt;script type="text/javascript"&gt;
 +
firebug.env.height = 500;
 +
&lt;/script&gt;
 +
</pre>
-
            <p>firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.</p>
+
Also, developers can use their own css file;
-
<pre class="code">   var req = new XmlHttpRequest;
+
<pre class="code">
-
    firebug.watchXHR(req);</pre>
+
&lt;script type="text/javascript"&gt;
-
            <p>firebug.inspect: Now elements can be inspected in javascript code:</p>
+
firebug.env.css = "/myown/firebug.css"
-
            <pre class="code"> firebug.inspect(document.body.firstChild);
+
&lt;/script&gt;
-
            </pre>
+
</pre>
-
            <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:
+
-
<pre class="code">    firebug.d.console.cmd.log("test");
+
-
    firebug.d.console.cmd.dir([ "test" ]);</pre>
+
-
   
+
== Commands ==
-
            <!-- Notes -->
+
<em>Now FBLite supports [http://getfirebug.com/console.html all basic commands] of Firebug.</em>
-
            <h3>Notes</h3>
+
 
-
            <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.watchXHR: Use this function to watch the status of XmlHttpRequest objects.
-
<pre class="code">   firebug.d.console.cmd.log("test");
+
<pre class="code">
-
    firebug.d.console.cmd.dir([ "test" ]);</pre>
+
var req = new XmlHttpRequest;
 +
firebug.watchXHR(req);</pre>
 +
 
 +
firebug.inspect: Now elements can be inspected in javascript code:
 +
<pre class="code">
 +
firebug.inspect(document.body.firstChild);
 +
</pre>
 +
 
 +
On some browsers, the console object is already declared. If you observe errors in Safari, for instance, use the console commands in this fashion:
 +
<pre class="code">
 +
firebug.d.console.cmd.log("test");
 +
firebug.d.console.cmd.dir([ "test" ]);</pre>
 +
 
 +
== Notes ==
 +
On some browsers, the console object is already declared. If you observe errors in Safari, for instance, use the console commands in this fashion:
 +
<pre class="code">
 +
firebug.d.console.cmd.log("test");
 +
firebug.d.console.cmd.dir([ "test" ]);</pre>
-
            <p>Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't create by itself.</p>
+
Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't created by itself.

Revision as of 09:49, 30 October 2009

Fb lite screenshot 1.png

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.

Latest Version: 1.2.1 (2008-09 CHANGELOG)

Contents

Screenshots

Installing Firebug Lite 1.2

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 bookmarklet

With the following JS link you can use Firebug Lite on any page (you can copy it to create a bookmark):

  
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 Import firebug-lite-compressed.js or firebug-lite.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/firebug-lite.js"></script>

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>

Commands

Now FBLite supports all basic commands 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

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" ]);

Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't created by itself.

Personal tools