Firebug Lite

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
 
(7 intermediate revisions not shown)
Line 1: Line 1:
-
{{stub}}
+
This page is being updated. Meanwhile, please visit [http://getfirebug.com/firebuglite http://getfirebug.com/firebuglite] to get information about how to install and configure Firebug Lite.
-
<a href="lite/screenshot_1.png"><img src="lite/screenshot_1_thumb.png" class="floatRight" style="border:3px solid #ccc; padding:3px;" /></a>
+
==TODO==
-
            <p>Firebug is an extension for Firefox, but what happens when you need to
+
* create [[Firebug Lite Build Process]]
-
            test your pages in Internet Explorer, Opera, and Safari?</p>
+
* create [[Firebug Lite Release Notes]]
-
            <p>The solution is Firebug Lite, a JavaScript file you can insert
+
==Related Pages==
-
            into your pages to simulate some Firebug features in browsers that are
+
* [[Firebug Lite FAQ]]
-
            not named "Firefox".</p>
+
* [[Firebug Lite Differences From Firebug]]
 +
* [[Firebug 1.7 Script Panel]]
-
            <p>Firebug Lite creates the variable "firebug" and
+
==Older Versions==
-
            doesn't affect or interfere with HTML elements that aren't created
+
* [[Firebug Lite 1.2]]
-
            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>
+
-
            </ul>
+
-
            </p>
+
-
           
+
-
            <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
+
-
            Firebug lite:</p>
+
-
 
+
-
<pre class="code">    &lt;script type='text/javascript'
+
-
        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>
+
-
            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"
+
-
  &lt;/script&gt;
+
-
            </pre>
+
-
           
+
-
           
+
-
            <!-- Using Firebug Lite Offline -->
+
-
            <h3>Using Firebug Lite Offline</h3>
+
-
            <p>Download the <a href="http://getfirebug.com/releases/lite/1.2/">source</a></p>
+
-
            <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>
+
-
 
+
-
<pre class="code">
+
-
    &lt;script language="javascript" type="text/javascript"
+
-
        src="/path/to/firebug/firebug-lite.js"&gt;&lt;/script&gt;</pre>
+
-
 
+
-
            <!-- Commands -->
+
-
            <h3>Commands</h3>
+
-
            <p><em>Now FBLite supports <a href="http://getfirebug.com/console.html">all basic commands</a> of Firebug.</em></p>
+
-
 
+
-
            <p>firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.</p>
+
-
<pre class="code">    var req = new XmlHttpRequest;
+
-
    firebug.watchXHR(req);</pre>
+
-
            <p>firebug.inspect: Now elements can be inspected in javascript code:</p>
+
-
            <pre class="code"> firebug.inspect(document.body.firstChild);
+
-
            </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>
+
-
 
+
-
   
+
-
            <!-- Notes -->
+
-
            <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:
+
-
<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>
+

Latest revision as of 15:01, 25 March 2011

This page is being updated. Meanwhile, please visit http://getfirebug.com/firebuglite to get information about how to install and configure Firebug Lite.

[edit] TODO

[edit] Related Pages

[edit] Older Versions

Personal tools