Firebug Lite

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Static on-line installation: Changed from single quotes to double quotes)
 
(5 intermediate revisions 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 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