Firebug Lite FAQ

From FirebugWiki
Revision as of 13:40, 25 March 2011 by Pedrosimonetti (Talk | contribs) (small correction)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Where to Get Help[edit]

[under construction]

Reporting bugs and feature requests[edit]

Where do I report a bug or a feature request?[edit]

  • If you are unsure about the bug/feature request, or it is a general or complex subject, use the Firebug newsgroup
  • If you have a test case to reproduce the problem, or exemplify the feature you are requesting, use the issue tracker

Do NOT post bug reports and/or feature requests in this wiki, twitter, in the Google Chrome extension gallery, blog posts, and any other place than the Firebug newsgroup and the Firebug Issues List.

How do I report a bug?[edit]

Before reporting a bug, please search in our issue tracker to see if the bug was already reported. Also, search in our newsgroup to see if there was a discussion related to the subject.

  • Include the term "Firebug Lite" in the summary of the report
  • Inform the following info: which browser you are using and the version numbers of Firebug Lite, your browser, and your OS
  • Provide a test case.
  • Check that you have "starred" the issue.

Keep in mind that the amount of time you invest in your bug report is directly proportional to the chances of the bug being fixed. This is an open source project and we have few resources at our disposal. Consequently we are more likely to dedicate our time on bugs that are clear to understand and reproducible.

How do I request a feature?[edit]

Requesting features/enhancements for Firebug Lite is easy. Start a new issue as explained in the "How do I report a bug?" section, and remember to include the text "Enhancement: " in the beginning of the summary, so an administrator can later label the issue as an enhancement request.

General questions[edit]

What is Firebug Lite?[edit]

Firebug Lite is a developer tool written in JavaScript which can be easily embeded in web pages, providing some Firebug features in other browsers than Firefox.

Here's a brief history of Firebug Lite:

  • Back in 2006, Joe Hewitt, the creator of Firebug, got tired of people constantly asking "How do I make Firebug run in IE?" and so created a simple console viewer baptized as "Firebug Lite 1.0". Later, with some small contributions from the community, "Firebug Lite 1.1" was released.
  • So far, Firebug Lite was just a simplified version of the Console panel. In 2008, Azer Koçulu decided to change that and joined the Firebug Working Group. He was previously working on a similar tool called "pi.debugger" so he started improving the application to support more Firebug features. The result was "Firebug Lite 1.2" and it was a great improvement over the 1.1 version. Consequently, Firebug Lite started gaining popularity, and more developers started contributing to the project, like Mike Ratcliffe (which has been fixed more than 50 bugs in the 1.2 version), and Mike Wilcox.
  • Thinking how to improve even more the Lite version, Pedro Simonetti started wondering if some of Firebug's source code could be ported to a cross-browser version. If possible, it could vastly improve the look and feel of the application. In 2010, after a long period of development, Firebug Lite 1.3 graduated out of beta. The new architecture allows using Firebug modules with minimal changes, and currently 60% of Firebug's code has been ported. Future versions of Firebug Lite will (hopelly) allow sharing code with Firebug without requiring any modifications.

What browsers are supported?[edit]

Firebug Lite supports the following browsers:

  • Internet Explorer 6, 7 and 8
  • Firefox
  • Chrome
  • Safari
  • Opera

Why using Firebug Lite and not my favorite tool?[edit]

No one said not to use your favorite tool! Firebug Lite is just one more tool to help developers build their web applications.

Furthermore, these days web applications are becoming more and more complex, and therefore developers can no longer rely on a single tool to do his work. Take for example Internet Explorer, you may end up using Firebug Lite to handle console messages, Fiddler to analyze your network traffic, and another tool to debug JavaScript.

What are the advantages of Firebug Lite[edit]

The main advantages of Firebug Lite are:

  • Fast to load
  • Don't require installation
  • Easy to embed
  • Easy to extend

General problems[edit]

It doesn't work on local pages[edit]

If by "local pages" you mean files accessed via "file:///" protocol then yes, Firebug Lite doesn't work with "file:///" protocol. This is a JavaScript security restriction to prevent malicious web pages from accessing files in your your machine. Also, please note that the while you can load a "local page" in the browser (it will render properly) it will NOT behave exactly the same as when hosted in a web server.


You can solve this problem by loading your page in a web server installed in your machine, so you can access that local files through "http://" addresses. This is the best solution: it is safer, and you'll get the most of what Firebug Lite can give you. I recommend using Apache HTTP Server, but you can use anyone (like IIS for example).

Related discussions:

I keep seeing "Access to restricted URI denied"[edit]

Firebug Lite is written in JavaScript and for security reasons JavaScript is not allowed to read external resources (like stylesheets and scripts). Consequently, Firebug Lite cannot read/modify external stylesheets/scripts.


You can workaround this problem by loading the stylesheets locally (that is, in the same domain). So, you might use:

<link href="/path/to/styles.css" rel="stylesheet" type="text/css" />

Instead of:

<link href="" rel="stylesheet" type="text/css" />

Please note that the same apply to imported rules. You might use:

@import url("/path/to/imported.css");

Instead of:

@import url("");

Follow our progress:

We are working on ways to solve this issue in the future. If you want to get an email notification about our progress on it, please "star" the Issue 3225.

Related discussions:

Additional info:

I keep seeing "This element has no style rules"[edit]

This problem is a consequence of JavaScript's access restrictions to external resources. See I keep seeing "Access to restricted URI denied" for information about how to work around this problem.

I can't see the bottom of the page when Firebug Lite is open[edit]

[under construction]

HTML Panel[edit]

I can't edit HTML attributes[edit]

[under construction]

CSS and Style Panels[edit]

I can't see all stylesheets[edit]

[under construction]

I keep seeing "This element has no style rules"[edit]

This problem is a consequence of JavaScript's access restrictions to external resources. See I keep seeing "Access to restricted URI denied" for information about how to work around this problem.

I can't see line numbers of CSS rules[edit]

[under construction]

Script Panel[edit]

I can't see all scripts[edit]

[under construction]

About Firebug Lite extension for Google Chrome[edit]

What's the difference between the extension and the bookmarlet?[edit]

[under construction]

Why not use the Chrome Developer Tools?[edit]

Nobody said not to use Chrome Developer Tools. We believe the best tool is the one a person is comfortable and productive with to do a specific task, or simply the one a person likes. Web development covers a lot of different things and for each different case some tool might be better than others. For instance, Fiddler allows you to break on a network request and change headers on-the-fly. If you have a strange problem with HTTP headers, using Fiddler will be probably a better choice than use Chrome Developer Tools, Firebug or Firebug Lite.

What does Firebug Lite for Chrome have that the webkit developer tools doesn't?[edit]

[TODO: add details]

  • rich representation of objects - each thing is displayed differently in Firebug Lite according to several factors like its type, context, size, etc. Strings, numbers, functions, objects will have distinct representations, and the objects themselves will have several distinct representations. For example, if it is an array it will show the list with the short representation of each item; if it is a mouse event it will show the mouse coordinates; if it is a HTML Element it will show the tag name, id and class; and so on...
  • deep introspection
  • DOM Panel
  • rich XHR watcher
  • rich CSS editing
  • tooltip for images
  • extension system

Why it doesn't work on some pages?[edit]

[under construction]

I got a "Signature verification failed" error when I try to install[edit]

[under construction]

How to activate/deactivate Firebug Lite for a particular site[edit]

[under construction]

I click in the bug icon but Firebug Lite does not start[edit]

[under construction]