firebug-lite

zhkac

Latest Version: 1.2.1 (2008-09 CHANGELOG)
<!-- Installing Firebug Lite -->
Installing Firebug Lite 1.2

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 bookmarklet -->
Firebug Lite as bookmarklet

Drag the following link to your bookmark toolbar and use Firebug Lite on any page:
Firebug Lite
javascript:var firebug=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);
Configuring Firebug Lite

Height of the firebug lite form is resizeable in latest version;
  <script type="text/javascript">  firebug.env.height = 500;  </script>            Also, developers can use their own css file;
  <script type="text/javascript">  firebug.env.css = "/myown/firebug.css"  </script>            <!-- Using Firebug Lite Offline -->
Using Firebug Lite Offline

Download the source
Import firebug-lite-compressed.js or 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.
    <script language="javascript" type="text/javascript"         src="/path/to/firebug/firebug-lite.js"></script><!-- Commands -->
Commands

Now FBLite supports all basic commands of Firebug.
firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.
    var req = new XmlHttpRequest;    firebug.watchXHR(req);firebug.inspect: Now elements can be inspected in javascript code:
firebug.inspect(document.body.firstChild);            On some browsers, the console object is already declared. 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" ]);<!-- Notes -->
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:
    firebug.d.console.cmd.log("test");    firebug.d.console.cmd.dir([ "test" ]);Firebug Lite creates the variables "firebug" and doesn't affect or interfere HTML elements that aren't create by itself.
 
 
Console API:
Firebug adds a global variable named "console" to all web pagesloaded in Firefox. This object contains many methods that allow you towrite to the Firebug console to expose information that is flowingthrough your scripts.
console.log(object[, object, ...])

Writesa message to the console. You may pass as many arguments as you'd like,and they will be joined together in a space-delimited line.
The first argument to log may be a string containing printf-like string substitution patterns.  For example:
console.log("The %s jumped over %d tall buildings", animal, count);The example above can be re-written without string substitution to achieve the same result:
console.log("The", animal, "jumped over", count, "tall buildings");Thesetwo techniques can be combined. If you use string substitution butprovide more arguments than there are substitution patterns, theremaining arguments will be appended in a space-delimited line, like so:
console.log("I am %s and I have:", myName, thing1, thing2, thing3);Ifobjects are logged, they will be written not as static text, but asinteractive hyperlinks that can be clicked to inspect the object inFirebug's HTML, CSS, Script, or DOM tabs. You may also use the %opattern to substitute a hyperlink in a string.
Here is the complete set of patterns that you may use for string substitution:

String Substitution Patterns
%s	String
%d, %i	Integer (numeric formatting is not yet supported)
%f	Floating point number (numeric formatting is not yet supported)
%o	Object hyperlink

console.debug(object[, object, ...])

Writes a message to the console, including a hyperlink to the line where it was called.
console.info(object[, object, ...])

Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.
console.warn(object[, object, ...])

Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called.
console.error(object[, object, ...])

Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called.
console.assert(expression[, object, ...])

Tests that an expression is true.  If not, it will write a message to the console and throw an exception.
console.dir(object)

Printsan interactive listing of all properties of the object. This looksidentical to the view that you would see in the DOM tab.
console.dirxml(node)

Printsthe XML source tree of an HTML or XML element. This looks identical tothe view that you would see in the HTML tab. You can click on any nodeto inspect it in the HTML tab.
console.trace()

Prints an interactive stack trace of JavaScript execution at the point where it is called.
Thestack trace details the functions on the stack, as well as the valuesthat were passed as arguments to each function. You can click eachfunction to take you to its source in the Script tab, and click eachargument value to inspect it in the DOM or HTML tabs.
console.group(object[, object, ...])

Writes a message to the console and opens a nested block to indent all future messages sent to the console.  Call console.groupEnd() to close the block.
console.groupCollapsed(object[, object, ...])

Like console.group(), but the block is initially collapsed.
console.groupEnd()

Closes the most recently opened block created by a call to console.group() or console.groupEnd()
console.time(name)

Creates a new timer under the given name.  Call console.timeEnd(name) with the same name to stop the timer and print the time elapsed..
console.timeEnd(name)

Stops a timer created by a call to console.time(name) and writes the time elapsed.
console.profile([title])

Turns on the JavaScript profiler.  The optional argument title would contain the text to be printed in the header of the profile report.
console.profileEnd()

Turns off the JavaScript profiler and prints its report.
console.count([title])

Writes the number of times that the line of code where count was called was executed.  The optional argument title will print a message in addition to the number of the count.
 
 
Command Line API
The Firebug command line provides these special functions for your convenience:
$(id)

Returns a single element with the given id.
$$(selector)

Returns an array of elements that match the given CSS selector.
$x(xpath)

Returns an array of elements that match the given XPath expression.
dir(object)

Printsan interactive listing of all properties of the object. This looksidentical to the view that you would see in the DOM tab.
dirxml(node)

Printsthe XML source tree of an HTML or XML element. This looks identical tothe view that you would see in the HTML tab. You can click on any nodeto inspect it in the HTML tab.
cd(window)

Bydefault, command line expressions are relative to the top-level windowof the page. cd() allows you to use the window of a frame in the pageinstead.
clear()

Clears the console.
inspect(object[, tabName])

Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.
The available tab names are "html", "css", "script", and "dom".
keys(object)

Returns an array containing the names of all properties of the object.
values(object)

Returns an array containing the values of all properties of the object.
debug(fn)

Adds a breakpoint on the first line of a function.
undebug(fn)

Removes the breakpoint on the first line of a function.
monitor(fn)

Turns on logging for all calls to a function.
unmonitor(fn)

Turns off logging for all calls to a function.
monitorEvents(object[, types])

Turns on logging for all events dispatched to an object. The optional argument types may specify a specific family of events to log.  The most commonly used values for types are "mouse" and "key".
Thefull list of available types includes "composition", "contextmenu","drag", "focus", "form", "key", "load", "mouse", "mutation", "paint","scroll", "text", "ui", and "xul".
unmonitorEvents(object[, types])

Turns off logging for all events dispatched to an object.
profile([title])

Turns on the JavaScript profiler.  The optional argument title would contain the text to be printed in the header of the profile report.
profileEnd()

Turns off the JavaScript profiler and prints its report.