Firebug

This version was conceived to put the Firebug Lite in a new level, by allowing code reuse from Firebug's original source. A new core was created to accomplish the following goals:

Performance - the core of Firebug Lite 1.3 was rewritten from scratch taking the performance into account in the first place.

Modularity - the code is now more modular, making it easier to add new features and UI components such as panels, buttons, menus etc. The modularity also helps the development process. Once the modules can be isolated it is easier to detect the cause of complicated problems like memory leaks.

Shared code - the core was designed to make it possible to port some code directly from the Firebug source with as few as possible modifications. As a result some features and UI elements behave exactly as in Firebug.

Compatibility - the new core is compatible with XHTML and XML+XSLT documents. Thanks to the new context-independent approach it supports now the experimental persistent popups feature (popups that "live" across different page loads of the same domain).

User Interface

• Port of Firebug's Visual Object Representation (aka Reps)
• Recreation of Firebug 1.3 User Interface with pixel precision
• Menu options
• Resizable Side Panel
• Skinnable Interface

CSS

• CSS cascading view
• CSS inheritance view
• Live editing CSS rules and properties
• Autocomplete as you type feature, with smart suggestions (you'll get only the suggestions you need for each property)
• Increment/decrement with UP/DOWN and PAGE UP/PAGE DOWN keys

Inspector

• Full BoxModel Highlight including margin, border, padding and content boxes
• The BoxModel is highlighted when you move your mouse over a representation of a HTML element, in any of the place of the User Interface
• Elements are selected on-the-fly while using the Inspect tool

Console

• console.group(), console.groupCollapsed() and console.groupEnd()
• console.trace() (now with file name and line numbers for some browsers)
• Command line API functions $(), $$(), and dir()
• Command line shortcuts $0 and $1 for recent selected elements
• Autocomplete (tab, shift+tab)
• can capture console messages before DOM document creation (when installed at the HTML header)

Core

• XHR watcher (with Headers, Response, Post and Params tabs)
• Port of Firebug Library (aka Lib, FBL)
• Port of Firebug DOM Templates Engine (aka Domplate), the magic behind Reps
• Plugin system like Firebug
• Context-independent (will allow cross-iframe debugging, and persistent popups)
• Persistent popups
• Synchronization across different windows (iframe, popup)

And more...

• For a complete list of changes, check the changelog.

1.3. What's Not in Lite?

Some features are not included in Firebug Lite 1.3, but due the new core that supports code sharing from Firebug, are likely to be included in the Firebug Lite 1.4 version:

• Live editing for all panels
• Layout Side Panel
• Context menu options
• Tooltips (to show colors and images)
• Search feature

Other features though are too dependent in browser internals and will not be supported (at least in a near future*), such as:

• Javascript debugger / Javascript profiler
• Net panel / HTTP and XHR monitor
• Access to restricted URI resources
• Highlight HTML changes

*Discussions about remote debugging indicates that should be possible to support JavaScript debugging in browsers like Google Chrome and Opera in the future.

Bookmarklet

Bookmark the following links:

Stable channel

• Firebug Lite
• Firebug Lite debug

Beta channel

• Firebug Lite beta

Live link

You can also link directly to the hosted version at getfirebug.com. Copy the following code, and paste it in the TOP of the HEAD of your document:

Stable channel

Firebug Lite: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Firebug Lite debug: <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

Beta channel

Firebug Lite beta: <script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>

Local link (offline)

If you need using Firebug Lite while offline, download the code, copy it to a local destination, and link the firebug-lite.js in the TOP of the HEAD of your document:

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

If you want to debug the local installation, use the firebug-lite-debug.js file instead:

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

The properties you can change include (with respective default values):

• saveCookies - false
• startOpened - false
• startInNewWindow - false
• showIconWhenHidden - true
• overrideConsole - true
• ignoreFirebugElements - true
• disableWhenFirebugActive - true
• enableTrace - false
• enablePersistent - false

Here is the list of methods you can use to change the options, in ascendant order of priority, that is, a particular method will override the options of preceding methods:

<html debug="true">

For backwards compatibility you can still use the debug="true" attribute in the <html> tag to make Firebug Lite starts opened, like:

<html debug="true">

Script URL options

You can also set the options using URL fragments, specially handy to tweak options in your bookmarklet.

https://getfirebug.com/firebug-lite.js#enableTrace

Options are separated by commas (,), and values are informed using the equals to (=) symbol. If no value is informed, "true" is assumed.

path/to/firebug-lite.js#enableTrace,overrideConsole=false

is equivalent to:

path/to/firebug-lite.js#enableTrace=true,overrideConsole=false

Script JSON options

It is possible to set options using a JSON object inside the linked script:

<script type="text/javascript" 
src="https://getfirebug.com/firebug-lite.js">
{
    overrideConsole: false,
    startInNewWindow: true,
    startOpened: true,
    enableTrace: true
}
</script>

Cookies

Finally, you can override the options using cookies, via User Interface, by clicking in the Firebug icon in the upper-left corner.

If you are familiar with Firebug extension development, you will see that developing an extension for Firebug Lite is very similar. In a Firebug extension all code is encapsulated in a strange at first glance but very clever way:

FBL.ns(function() { with (FBL) {

// extension code

}});

In a Firebug Lite extension the code is encapsulated in a similar way but using Firebug.extend instead, once the FBL module (Firebug internal's library) is not exposed to the global namespace:

Firebug.extend(function(FBL) { with (FBL) {

// extension code

}});

If you are not familiar with Firebug extension development, I suggest looking at Honza's series of tutorials, including Firebug Tutorial and Domplate Tutorial.

Here's a sample of how to create a new panel in Firebug Lite:

Firebug.extend(function(FBL) { with (FBL) {
// ***********************************************************************

function PluginPanel(){};

PluginPanel.prototype = extend(Firebug.Panel,
{
    name: "Plugin",
    title: "Plugin",
    
    initialize: function(){
        Firebug.Panel.initialize.apply(this, arguments);
        
        this.panelNode.innerHTML = "Hello World!";
    }
});

Firebug.registerPanel(PluginPanel);

// ***********************************************************************
}});

The debug mode helps detecting errors in Firebug Lite. When in debug mode, Firebug Lite will behave as explained below:

• Firebug Lite starts opened.
• The internal library used by Firebug Lite (aka FBL) is exposed to the global namespace allowing the inspection of its content.
• Firebug Lite will be forced to open even when Firebug is active (which is not the default behavior), so you can use Firebug to debug it.
• The "Trace Panel" is enabled (in which internal log messages of Firebug Lite are printed).

The debug mode will be activated when you run the Firebug Lite debug bookmarklet, and when you the load the "firebug-lite-debug.js" or "firebug-lite-dev.js" files. You can also activate it manually by setting a special option "debug" to "true", using the Script URL or Script JSON methods.

If you want to debug Firebug Lite, fix a bug or add a new feature, you will want to run Firebug Lite in development mode. To do so, first checkout the latest version in our repository, and then insert a script at the TOP of the HEAD of your document.

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

When in development mode, some things behave quite differently to make the development process easier, such as:

• All script files are loaded separately, without compression.
• The internal library used by Firebug Lite (aka FBL) is exposed to the global namespace allowing you to inspect its content. It is also exposed the domplate and its classes, and the FBTrace object
• The skin is loaded in a separated file allowing you to rapidly change the style and/or markup of the User Interface.
• Firebug Lite will be forced to open even when Firebug is active (which is not the default behavior), so you can use Firebug to debug it.
• The "Trace Panel" is enabled (in which internal log messages of Firebug Lite are printed).
• A new "Dev Panel" will be available with tools to compress the skin and the source code of the application in a single file.

Your contribution is very important. Found a bug? Have a suggestion? Please report us.

Found a fix for a particular issue? Patches are welcome. Also, if you are willing to help more deeply with coding, join our team.