Firebug Lite

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Updated version to reflect code and changelog. Reworded some text for clarity and correctness. Added more exceptions to console API. Corrected watchXHR example. Removed duplicated notes.)
(Updating Firebug Lite page)
Line 1: Line 1:
-
[[File:Fb lite screenshot 1.png|thumb|right]]
+
being updated...
-
Firebug is an extension for Firefox but what do you do 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 other than Firefox.
+
==Older Versions==
-
 
+
[[Firebug Lite 1.2]]
-
Firebug Lite creates two variables, <code>firebug</code> and <code>console</code>, in the global context and does not affect or interfere with HTML elements that aren't created by itself.
+
-
 
+
-
'''Latest Version:''' 1.2.3 (2009-05 [http://code.google.com/p/fbug/source/list?path=/lite/branches/firebug1.2/firebug-lite.js&start=4127 ChangeLog])
+
-
 
+
-
== 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 ==
+
-
=== 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 a bookmarklet ===
+
-
Enter the following code into your address bar to use Firebug Lite on any page.
+
-
You can also copy the code into a bookmark on your toolbar.
+
-
<!-- Unfortunately, the wiki does not allow URLs with the "javascript" URI scheme. -->
+
-
 
+
-
<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 files] and save them to a folder in your site's directory. Include [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] in the page(s) that you want to contain Firebug Lite. Search for "firebug-lite.css" in the JavaScript file and replace it with the location of the firebug-lite.css file you downloaded.
+
-
 
+
-
<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 ==
+
-
You can change the height of the Firebug Lite UI with the following code.
+
-
<pre class="code">
+
-
&lt;script type="text/javascript"&gt;
+
-
firebug.env.height = 500;
+
-
&lt;/script&gt;
+
-
</pre>
+
-
 
+
-
You can also use your own CSS file to customize Firebug Lite's UI:
+
-
<pre class="code">
+
-
&lt;script type="text/javascript"&gt;
+
-
firebug.env.css = "/myown/firebug.css"
+
-
&lt;/script&gt;
+
-
</pre>
+
-
 
+
-
== Firebug Lite API ==
+
-
=== console ===
+
-
Firebug Lite supports all of [http://getfirebug.com/console.html Firebug's basic console methods] except <code>console.assert</code>, <code>console.group</code>, <code>console.groupCollapsed</code>, <code>console.groupEnd</code>, <code>console.profile</code> and <code>console.profileEnd</code>.
+
-
 
+
-
Firebug Lite does not support string substitution patterns, it simply concatenates arguments together.
+
-
 
+
-
=== firebug.watchXHR(request) ===
+
-
Use this method to watch the status of XmlHttpRequest objects.
+
-
<pre>
+
-
var request = new XMLHttpRequest();
+
-
 
+
-
firebug.watchXHR(request);
+
-
 
+
-
request.open('GET', 'http://getfirebug.com', false); 
+
-
request.send(null);
+
-
</pre>
+
-
 
+
-
=== firebug.inspect(node) ===
+
-
Use this method to inspect DOM elements.
+
-
<pre>
+
-
firebug.inspect(document.body.firstChild);
+
-
</pre>
+
-
 
+
-
== Notes ==
+
-
Some browsers already declare the <code>console</code> variable. If you observe errors in Safari, for instance, use the console commands in this fashion:
+
-
<pre>
+
-
firebug.d.console.cmd.log("test");
+
-
firebug.d.console.cmd.dir([ "test" ]);
+
-
</pre>
+

Revision as of 14:41, 25 March 2011

being updated...

Older Versions

Firebug Lite 1.2

Personal tools