|
|
| (8 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <a href="lite/screenshot_1.png"><img src="lite/screenshot_1_thumb.png" class="floatRight" style="border:3px solid #ccc; padding:3px;" /></a>
| + | 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. |
| - | <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
| + | ==TODO== |
| - | into your pages to simulate some Firebug features in browsers that are
| + | * create [[Firebug Lite Build Process]] |
| - | not named "Firefox".</p>
| + | * create [[Firebug Lite Release Notes]] |
| | | | |
| - | <p>Firebug Lite creates the variable "firebug" and
| + | ==Related Pages== |
| - | doesn't affect or interfere with HTML elements that aren't created
| + | * [[Firebug Lite FAQ]] |
| - | by itself.</p>
| + | * [[Firebug Lite Differences From Firebug]] |
| - |
| + | * [[Firebug 1.7 Script Panel]] |
| - | <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>
| + | ==Older Versions== |
| - | </ul>
| + | * [[Firebug Lite 1.2]] |
| - | </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"> <script type='text/javascript'
| + | |
| - | src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script></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"> <script type="text/javascript">
| + | |
| - | firebug.env.height = 500;
| + | |
| - | </script>
| + | |
| - | </pre>
| + | |
| - |
| + | |
| - | Also, developers can use their own css file;
| + | |
| - | <pre class="code"> <script type="text/javascript">
| + | |
| - | | + | |
| - | firebug.env.css = "/myown/firebug.css"
| + | |
| - | </script>
| + | |
| - | </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">
| + | |
| - | <script language="javascript" type="text/javascript"
| + | |
| - | src="/path/to/firebug/firebug-lite.js"></script></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>
| + | |
