Firebug FAQs

Installation

Usage

Activation

Preferences

Console Panel

HTML Panel

CSS Panel

Script Panel

DOM Panel

Net Panel

Extensions

Miscellaneous

Issues




Installation

Q: What license does Firebug use?
Firebug is free and open source software distributed under the BSD License.
Q: How do I install Firebug?
There are three ways to install Firebug:
Q: Can I use Firebug on non-Firefox browsers?
You can use Firebug Lite, which is a light version of Firebug written completely in JavaScript.
Q: To which versions of Firefox is Firebug compatible?
Check out compatibility table on addons.mozilla.org (AMO).
Q: How to install Firebug into a clean profile?
Read our wiki page with detailed info how to install Firebug on various OSes.

Usage

Q: Is there some basic description of how Firebug works?
There are plenty of tutorials, videos and books on the web. You can also use this wiki as a source of information. And some of Firebug's features are described in detail in Honza's blog.
Q: How can I see which version of Firebug I have?
You have three possibilities:
  • Firefox Menu > Add-ons or Tools > Add-ons > Firebug (version number on the panel)
  • Firebug Menu > About... <version number> (since 1.1)
  • Hover over the Firebug Start Button

Activation

Q: How do I open Firebug?
Either via F12 or by clicking the Firebug Start Button in the Firefox main toolbar (Firefox 3.6 and earlier: Firebug status bar icon in the lower right corner of Firefox)
Q: How does the activation model of Firebug work?
Firebug implements a whitelist model as well as an "always on" model. For more info see the complete description of the activation model.

Preferences

Q: How do I reset all Firebug options?
Firebug Menu > Options > Reset All Firebug Options
Q: Are there options, which you can't set through the UI?
Yes, there are some hidden options. You can change them via about:config. See Firebug preferences page for more info.

Console Panel

Q: How to enable the Console panel?
When the message appears that the Console Panel is disabled, you can click the Enable link inside of it. Or you can open the Options Menu and click on Enabled.
Q: How does the Console panel work?
See the Console Panel description.
Q: Does Firebug interfere in any way with jQuery's $ shortcut?

Although Firebug uses the '$' notation it doesn't interfere with your code. Sometimes you may have issues testing code in the console but can easily avoid them by using the jQuery's alternative notation:

jQuery('div');

Instead of:

$('div');

Q: Why does console.log() not work?
In the case a script on the page already defines a console variable, Firebug doesn't inject its Console API.
Q: Why do I get the error "console is not defined"?
On Firefox versions up to 3.6 you will see this message in the Firefox Error Console as long as the Console Panel is not enabled. When the Console panel is enabled, it makes the 'console' object available to the page's javascript. Since Firefox 4.0 the 'console' object is already defined through the Firefox internal developer tools. So this message should not appear anymore.

HTML Panel

Q: How does the HTML panel work?
See the HTML Panel description.
Q: Where is the source shown inside the HTML panel located?
Firebug doesn't know about the file structure on the server. It only knows what the client browser knows.
The HTML contents can be dynamically generated by scripts running on the server, e.g. by CMS systems like Joomla or WordPress. Firebug does not have access to these server-side scripts.
Also the HTML contents can be changed dynamically via JavaScript. Such changes can be inspected using Break On Mutate.
Q: Why do the HTML panel contents look different than my source file?
The HTML panel shows a live view on what the browser is showing. I.e. if a JavaScript makes changes to the HTML, the HTML panel will display these changes. Also it displays the HTML structure formatted as tree structure. So it doesn't matter if the code coming from the server is minified or has thousands of spaces in between the tags, the display inside the panel will be the same.
Q: How can I save changes I made inside the HTML panel back to my source file?
You can't. As John J. Barton wrote on the newsgroup: Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.
The reason is that the HTML output is normally dynamically generated by some kind of server script language like e.g. PHP.
Though what could be done is to provide some mapping between URLs and files on your local machine. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.
Q: Why keeps the HTML panel scrolling up?
If the HTML panel scrolls up by itself, you probably have a timed event inside your code, which inserts or changes HTML and triggers the panel to scroll to this change. To avoid scrolling to the change uncheck the panel options Expand Changes and Scroll Changes Into View.
Q: Why do the source links inside the Style side panel not refer to my CSS file?

This may be caused by your internet provider. To save connection bandwidth (e.g. for UMTS connections) they try to merge requests whenever possible. So the CSS you had in separate files, may be merged into your HTML within <style> tags.

Some CMS like Joomla also have an option to compress the CSS output. So if the name of the CSS file doesn't correspond to the one in your CMS, check for such an option.

Q: What does the number after the file name inside the Style side panel mean?

Source links with a number behind them (#2, #3, ...) enumerate the internal stylesheets defined via <style> tags inside the page.

For external CSS files the number sign means that the same file is included several times.

CSS Panel

Q: How can I save changes I made inside the CSS panel back to my source file?

This feature is not integrated into Firebug, but there are some extensions, which do this (or at least let you save the generated CSS):

Q: Why does the CSS in the CSS panel look different to the one in my file?

Firebug displays the CSS as it is interpreted by Firefox in a formatted way. E.g. a defined margin: 10px 0px 10px 0px; will interpreted by Firefox as margin: 10px 0;. Also comments won't be displayed because they are ignored while interpreting the CSS.

To see the styles how you defined them switch to the Source Edit Mode.

Script Panel

Q: Why does the Script panel claim there's no JavaScript on the page when there obviously is code?
This means that your JavaScript contains a syntax error and could not be parsed by the browser. Check the Console Panel for the error position.
Q: Is there an option to de-minify JavaScript?
Currently not, but there is already a request to implement de-minifying JavaScript. Also there is another extension called Javascript Deminifier that does exactly that. It is working independently from Firebug, so you can also use it together with other debuggers.
Q: Why is there no syntax highlighting?
That's not implemented yet. See issue 4823. Though you can get syntax highlighting via an extension called FireRainbow.

DOM Panel

Q: What do the different colors of the variables mean?
The DOM panel explains the different colors.

Net Panel

Q: Why are jQuery AJAX requests not listed when I filter by XHR?
In some cases jQuery only simulates XMLHttpRequests. For example it creates a <script> tag when setting the dataType to jsonp.

Extensions

Q: An extension I use conflicts with Firebug. Where should I report that?

If the bug appears within Firebug and/or goes away if you deactivate the other extension, please report it to the author of the other extension and let us know about the problem by posting into our discussion group. Otherwise please create a report in our issue tracker.

Q: How to write a Firebug extension?

There's a wiki article describing some Firebug internals and how to start.

Furthermore Honza has some good blog posts about how to extend Firebug.

Q: Can you check the code I wrote for my Firebug extension?

If you have a specific issue, you can always contact us via the discussion group or IRC.

Please make sure you're asking about a specific issue. Unfortunately we normally don't have the time to check the whole code of your extension for errors or functionality.

Miscellaneous

Q: Why doesn't Firebug integrate feature X?

This can have different reasons:

Q: Why is Firebug that slow?

When Firebug reacts slowly, this might have the following reasons:

  • loading huge files (mainly inside the CSS or Script Panel)
  • logging many things into the Console Panel
  • If you get an "Unresponsive script" message, it might be a bug.
Q: How can I check from my website whether Firebug is enabled?
We try to avoid the detection of Firebug through websites for privacy reasons. There's also an issue related to this.
Q: Can I change the shortcuts used within Firebug?
Yes, via Firebug Menu > Customize Shortcuts or by pressing Ctrl/⌘+Shift+Alt+B you can open the Firebug Shortcut Bindings dialog, in which you can change the shortcuts.
Q: How can I participate in the Firebug project?
There are many ways how you can help us. Please read about How to become a contributor.

Issues

Q: Where to get help?
Q: I can't install Firebug. What can I do?
Read our wiki page with info about how to solve installation issues.
Q: Firebug crashes Firefox. What can I do?

Crash means the program exits.

Note that we're not responsible for fixing Firefox crashes - even when you can confirm that they are related to Firebug. Browser crashes can have different reasons. Generally in such cases it's a browser API Firebug uses, which is corrupt. When the browser crashes the Mozilla Crash Reporter should appear. To get the crash fixed please report it to Mozilla attaching the crash report URL, so they can fix it. Please inform us about the crash and post us the link to the report via the discussion group or IRC, though. Other people might have the same problem. In these cases we could point them to the report. If you see a crash, which affects many people, we might be able to find a workaround in some cases until it's fixed in Firefox.

Q: Firebug hangs itself or Firefox. Why?
Hang means the program is still running (it did not crash) but it fails to respond to user commands. The causes and diagnosis is completely different from a crash. You should follow the steps for what to do when you experience a bug, so you can find out if it's a problem in Firebug or the browser and create a test case.
Q: I found a bug in Firebug. What should I do?
Many problems with Firebug can already be solved by creating a new Firefox profile. Read about how to do this and further info on what to do when you experience a bug in Firebug.
Q: Why is enabling Firebug and tab switching that slow?
Firebug up to version 1.12.x is using an old version of the Firefox internal JavaScript debugger APIs for its debugging capabilities. These APIs are the reason for the slowdown.
We're already working hard on adopting the new debugger APIs.
As a temporary workaround you should disable the Script panel as long as you don't need it.
Q: Some symbols in Firebug are not displayed. Why is that?
This happens because Firebug is using some SVG files as icons and a SVG filters in its UI. The problem doesn't lie in Firebug but in how your browser handles local SVG files. There's already a fix for this for Firefox 26.0.
Also Firebug 1.12.1 temporarily replaces all SVG files by PNGs until Firefox 26.0 is released and is the minimum version Firebug supports.
To fix this manually you need to remove the entry for SVG files from the mimeTypes.rdf file inside your Firefox profile or just delete the file.
Q: Why does resizing the Firebug frame display a gray block?
This is caused by other extensions. The ones that are known to cause this problem are: