Firebug Lite

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Commands: Added exceptions to command support and note about string substitution. Minor formatting improvements.)
(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.)
Line 1: Line 1:
[[File:Fb lite screenshot 1.png|thumb|right]]
[[File:Fb lite screenshot 1.png|thumb|right]]
-
Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari?
+
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 that are not named "Firefox".
+
The solution is Firebug Lite, a JavaScript file you can insert into your pages to simulate some Firebug features in browsers other than Firefox.
-
Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
+
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.1 (2008-09 [http://getfirebug.com/lite.html CHANGELOG])
+
'''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 ==
== Screenshots ==
Line 13: Line 13:
* [http://getfirebug.com/lite/Safari.html Safari]
* [http://getfirebug.com/lite/Safari.html Safari]
-
== Installing Firebug Lite 1.2 ==
+
== Installing Firebug Lite ==
-
 
+
=== Static on-line installation ===
=== Static on-line installation ===
-
 
+
Insert this line of code into any page that you want to contain Firebug Lite:
-
Insert this line of code into any page that you want to contain Firebug lite:
+
<pre class="code">
<pre class="code">
Line 23: Line 21:
</pre>
</pre>
-
=== Firebug Lite as bookmarklet ===
+
=== Firebug Lite as a bookmarklet ===
-
With the following JS link you can use Firebug Lite on any page (you can copy it to create a bookmark):
+
Enter the following code into your address bar to use Firebug Lite on any page.
-
<pre class="code">
+
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);
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>
</pre>
=== Static off-line installation ===
=== Static off-line installation ===
-
Download the [http://getfirebug.com/releases/lite/1.2/ source]
+
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.
-
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">
<pre class="code">
-
&lt;script language="javascript" type="text/javascript"  
+
&lt;script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"&gt;&lt;/script&gt;
-
src="/path/to/firebug/firebug-lite.js"&gt;&lt;/script&gt;</pre>
+
</pre>
== Configuring Firebug Lite ==
== Configuring Firebug Lite ==
-
Height of the firebug lite form is resizeable in latest version;
+
You can change the height of the Firebug Lite UI with the following code.
<pre class="code">
<pre class="code">
&lt;script type="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
Line 45: Line 45:
</pre>
</pre>
-
Also, developers can use their own css file;
+
You can also use your own CSS file to customize Firebug Lite's UI:
<pre class="code">
<pre class="code">
&lt;script type="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
Line 52: Line 52:
</pre>
</pre>
-
== Commands ==
+
== Firebug Lite API ==
-
Firebug Lite supports [http://getfirebug.com/console.html all basic commands] of Firebug except <code>console.assert</code> and <code>console.groupCollapsed</code>.
+
=== 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 Lite does not support string substitution patterns, it simply concatenates arguments together.
-
 
+
=== firebug.watchXHR(request) ===
-
<code>firebug.watchXHR</code>: Use this function to watch the status of XmlHttpRequest objects.
+
Use this method to watch the status of XmlHttpRequest objects.
<pre>
<pre>
-
var req = new XmlHttpRequest;
+
var request = new XMLHttpRequest();
-
firebug.watchXHR(req);</pre>
+
 
 +
firebug.watchXHR(request);
-
<code>firebug.inspect</code>: Now elements can be inspected in javascript code:
+
request.open('GET', 'http://getfirebug.com', false); 
 +
request.send(null);
 +
</pre>
 +
 
 +
=== firebug.inspect(node) ===
 +
Use this method to inspect DOM elements.
<pre>
<pre>
firebug.inspect(document.body.firstChild);
firebug.inspect(document.body.firstChild);
</pre>
</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:
+
== 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>
<pre>
firebug.d.console.cmd.log("test");
firebug.d.console.cmd.log("test");
firebug.d.console.cmd.dir([ "test" ]);
firebug.d.console.cmd.dir([ "test" ]);
</pre>
</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.
 

Revision as of 04:01, 3 December 2009

Fb lite screenshot 1.png

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.

Firebug Lite creates two variables, firebug and console, 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 ChangeLog)

Contents

Screenshots

Installing Firebug Lite

Static on-line installation

Insert this line of code into any page that you want to contain Firebug Lite:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

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.

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);

Static off-line installation

Download the source files and save them to a folder in your site's directory. Include firebug-lite-compressed.js or 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.

<script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>

Configuring Firebug Lite

You can change the height of the Firebug Lite UI with the following code.

<script type="text/javascript">
firebug.env.height = 500;
</script>

You can also use your own CSS file to customize Firebug Lite's UI:

<script type="text/javascript">
firebug.env.css = "/myown/firebug.css"
</script>

Firebug Lite API

console

Firebug Lite supports all of Firebug's basic console methods except console.assert, console.group, console.groupCollapsed, console.groupEnd, console.profile and console.profileEnd.

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.

var request = new XMLHttpRequest();

firebug.watchXHR(request);

request.open('GET', 'http://getfirebug.com', false);   
request.send(null);

firebug.inspect(node)

Use this method to inspect DOM elements.

firebug.inspect(document.body.firstChild);

Notes

Some browsers already declare the console variable. If you observe errors in Safari, for instance, use the console commands in this fashion:

firebug.d.console.cmd.log("test");
firebug.d.console.cmd.dir([ "test" ]);
Personal tools