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 easier the process of adding 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+XSL 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), and will support cross-iframe inspection in the next version.

User Interface

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

CSS

• CSS cascading view
• CSS inheritance view
• Live editing CSS rules and properties
• Smart autocomplete (you'll get only the suggestions you need for each property)
• Autocomplete as you type feature
• 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() and console.groupEnd()
• console.trace() (thanks dongryphon for the contribution!)
• 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 (works better when you load the script in the HEAD of your document)
• Port most of the Firebug Library (aka Lib, FBL)
• Port the 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...

• Fixed problem with Internet Explorer and inline styles representation (thanks christophe.blin for the contribution!)
• For a complete list of changes, check the changelog.

1.2. What's missing in Firebug Lite 1.3?

Here are the features that are still missing, but should be available in the final Firebug Lite 1.3 release:

• Object links in console should be clickable
• XHR watching need to work with synchronous requests
• Some internal code need to be refactored (Chrome and Panels API)
• Make sure the code is stable enough

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

*Recent discussions about remote debugging indicates that should be possible to support JavaScript debugging in browsers like Google Chrome and Opera in a not so distant future, but the differences in the protocols may slow down this process (hey browser developers, what about adopting a standard?).

a) Bookmarlet

Bookmark the following links:

• Firebug Lite 1.3b
• Firebug Lite 1.3Xb (with trace enabled**)

**The trace enabled bookmarlet is intended to help identify error in Firebug Lite. If you find a bug, run the trace enabled bookmarlet and look for something strange in the logs.

b) 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:

<script type="text/javascript" src="https://getfirebug.com/releases/lite/beta/firebug.jgz"></script>

c) Local link (offline)

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

<script type="text/javascript" src="/local/path/to/firebug.jgz"></script>

d) Development mode:

If you want to debug Firebug Lite, fix a bug, or add a new feature, you will want to run the 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 that Firebug Lite uses (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.
• It will force to open Firebug Lite even when Firebug is active (which is not the default behavior), so you can use Firebug to debug it.
• A new panel "Dev" will be available with tools to compress the skin, and the source code of the application in a single file.

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

You can change the options using any of the following methods (in ascendant order of priority):

a) 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">

b) Script URL options

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

https://getfirebug.com/releases/lite/beta/firebug.jgz#enableTrace

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

path/to/firebug.jgz#enableTrace,overrideConsole=false

is equivalent to:

path/to/firebug.jgz#enableTrace=true,overrideConsole=false

c) 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/releases/lite/beta/firebug.jgz">
{
    overrideConsole: false,
    startInNewWindow: true,
    startOpened: true,
    enableTrace: true
}
</script>

d) Cookies

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

That's a lot of things to test, but we're particularly interested in make sure the core of the application is working well before we move on to the beta stage. Here are the list of the most important things to test:

5.1. Loading

Firebug Lite should run fine no matter how it was loaded.

Bookmarlet - the current bookmarlet used in both Firebug Lite 1.2 and 1.3 versions contains some problems and limitations (it won't load for example in XHTML and/or XML+XSL documents). We're particularly insterested in find such problems in the bookmarlet now we're in beta stage, because updating bookmarlets is a boring task, and should be done by the user individually, in each browser.

Local include - Firebug Lite should load fine when using relative paths in the URL (when loaded locally).

Live include - Firebug Lite should load fine when loaded directly from getfirebug.com.

5.2. Rendering

Please report us if you see some weird behavior in the User Interface, such as misplaced elements, elements not rendered, abnormal flickering, partial rendered panels, or any other visual weirdness.

5.4. Document Types

Firebug Lite should work in different types of documents such as XHTML and/or XML+XSL documents.

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.

Spread the word: Firebug Lite 1.3.0 beta released Last, but not least, you can also helping us by spreading the word, inviting more people to test this new version. Feel free to post about it in your blog, social network, or use the retweet button on the left.