Firefox Logo

Firebug Lite 1.4 release notes

Firebug Lite 1.4 is out! Check our blog post.

Overview

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

What's New?

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.

Install

Since Firebug Lite 1.3.0, there are four distributions channels.

Stable channel - this is the main distribution channel. The Stable Channel is updated with features and bug fixes once they have been properly tested in the Beta channel. Debug channel - the Debug channel uses the same version as the Stable channel but with different pre-configurations to make it easier to debug Firebug Lite itself. Beta channel - the Beta channel is where the new features and fixes are polished. It should be considerably stable (no known regression), but it may contain some bugs and some features may be incomplete. Developer channel - the Developer channel is where the ideas get created and tested. Once it is tied directly to our code repository you'll get the most recent code possible and will receive updates much more frequently than other channels. At the other hand, the Developer channel can be very unstable at times and the initial load can be slower.

For each distribution channel you can install Firebug Lite using three different ways:

Bookmarklet - a small bookmarklet to easily install Firebug Lite on any web page. Live Link - a link to a copy of the application hosted in our servers. Local Link - a link to a local copy of the application hosted in your server.

Stable channel

Stable bookmarklet

Add the following link to your bookmarks:

Firebug Lite

Stable live link

Include the following code at the top of the <head> of your page:

Stable local link

Download Firebug Lite and include the following code at the top of the <head> of your page:

Debug channel

Debug bookmarklet

Add the following link to your bookmarks:

Firebug Lite debug

Debug live link

Include the following code at the top of the <head> of your page:

Debug local link

Download Firebug Lite and include the following code at the top of the <head> of your page:

Beta channel

Beta bookmarklet

Add the following link to your bookmarks:

Firebug Lite beta

Beta live link

Include the following code at the top of the <head> of your page:

Beta local link

If you are going to use the Beta channel we recommend using the bookmarklet or the live link so you can take advantage of automatic updates. But if you want to use it locally anyway, download Firebug Lite and include the following code at the top of the <head> of your page:

Developer channel

Developer bookmarklet

Add the link of the desired version to your bookmarks:

Firebug Lite 1.4 dev Firebug Lite FlexBox dev (the next-generation of Firebug Lite)

Developer live link

Include the following code at the top of the <head> of your page:

Firebug Lite 1.4 dev:

Firebug Lite FlexBox dev (the next-generation of Firebug Lite):

Developer local link

Checkout Firebug Lite code and include the following code at the top of the <head> of your page:

Options

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

saveCookies - false startOpened - false startInNewWindow - false showIconWhenHidden - true overrideConsole - true ignoreFirebugElements - true disableXHRListener - false 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.

Extensions

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

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

Debug mode

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.

Development mode

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.

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.

Contributing

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.

You are viewing a mobilized version of this site...
View original page here

Mobilized by Mowser Mowser