|
|
| 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">
| + | |
| - | <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
| + | |
| - | </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">
| + | |
| - | <script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>
| + | |
| - | </pre>
| + | |
| - | | + | |
| - | == Configuring Firebug Lite ==
| + | |
| - | You can change the height of the Firebug Lite UI with the following code.
| + | |
| - | <pre class="code">
| + | |
| - | <script type="text/javascript">
| + | |
| - | firebug.env.height = 500;
| + | |
| - | </script>
| + | |
| - | </pre>
| + | |
| - | | + | |
| - | You can also use your own CSS file to customize Firebug Lite's UI:
| + | |
| - | <pre class="code">
| + | |
| - | <script type="text/javascript">
| + | |
| - | firebug.env.css = "/myown/firebug.css"
| + | |
| - | </script>
| + | |
| - | </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>
| + | |
