Difference between revisions of "Firebug Lite"

From FirebugWiki
Jump to: navigation, search
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[File:Fb lite screenshot 1.png|thumb|right]]
+
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.
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".
+
==TODO==
 +
* create [[Firebug Lite Build Process]]
 +
* create [[Firebug Lite Release Notes]]
  
Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
+
==Related Pages==
 +
* [[Firebug Lite FAQ]]
 +
* [[Firebug Lite Differences From Firebug]]
 +
* [[Firebug 1.7 Script Panel]]
  
'''Latest Version:''' 1.2.1 (2008-09 [http://getfirebug.com/lite.html CHANGELOG])
+
==Older Versions==
 
+
* [[Firebug Lite 1.2]]
== Screenshots ==
+
* [http://getfirebug.com/lite/ie.html IE]
+
* [http://getfirebug.com/lite/opera.html Opera]
+
* [http://getfirebug.com/lite/Safari.html Safari]
+
 
+
== Installing Firebug Lite 1.2 ==
+
 
+
=== Static on-line installation ===
+
 
+
Insert this line of code into any page that you want to contain Firebug lite:
+
 
+
<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 ===
+
With the following JS link you can use Firebug Lite on any page (you can copy it to create a bookmark):
+
<pre class="code"> 
+
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">
+
&lt;script language="javascript" type="text/javascript"
+
src="/path/to/firebug/firebug-lite.js"&gt;&lt;/script&gt;</pre>
+
 
+
== Configuring 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"
+
&lt;/script&gt;
+
</pre>
+
 
+
== Commands ==
+
<em>Now FBLite supports [http://getfirebug.com/console.html all basic commands] of Firebug.</em>
+
 
+
firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.
+
<pre class="code">
+
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>
+
 
+
Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't created by itself.
+

Latest revision as of 08: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.

TODO[edit]

Related Pages[edit]

Older Versions[edit]