Frequently Asked Questions

From FirebugWiki

Revision as of 07:55, 25 February 2013 by Wizonesolutions (Talk | contribs)
Jump to: navigation, search

Contents

Installation

How do I install Firebug?

There are three ways to install Firebug:

Can I use Firebug on non-Firefox browsers?

You can use Firebug Lite, which is a light version of Firebug written completely in JavaScript.

To which versions of Firefox is Firebug compatible?

Firebug version Min. Firefox version Max. Firefox version
1.10 13.0 17.*
1.9.1 5.0 12.a1
1.9.0 5.0 11.*
1.8.4 5.0 10.*
1.8.3 5.0 9.*
1.8.2 5.0 7.*
1.8.1 5.0 6.*
1.8.0 5.0 5.*
1.7.1 - 1.7.3 3.6 5.*
1.7.0 4.0b12 5.*
1.6.0 - 1.6.2 3.6 3.6.*
1.5.0 - 1.5.4 3.5 3.6.*
1.4.4 - 1.4.5 3.0 3.6.*
1.4.0 - 1.4.3 3.0 3.5.*
1.3.2 - 1.3.3 3.0 3.0.*
1.3.0 - 1.3.1 1.5 3.0.*
1.2.1 2.0 3.0.*
1.0 - 1.05 1.5 2.0.0.*

How to install Firebug into a clean profile?

To test for bugs regarding interactions with other extensions or corrupted profiles, you should do the following.

Firefox and Firebug re-install rarely fixes problems because the configuration files are not altered on reinstall. So to clear out the configuration files you need to create a new Firefox profile:

Linux Way

  1. Exit Firefox
  2. Get to a command line
  3. Run Firefox with -ProfileManager
    $ firefox -ProfileManager
  4. Create New Profile
  5. Start Firefox with your new profile
  6. Install Firebug into this clean profile

Windows Way

  1. Exit Firefox
  2. Get to a command line (Start > Run... > "cmd" Enter)
  3. Run Firefox with -ProfileManager (use quotes around the file name because of the spaces)
    "C:\Program Files\Mozilla Firefox\firefox.exe" -ProfileManager
  4. Create New Profile
  5. Start Firefox with your new profile
  6. https://addons.mozilla.org/firefox/addon/firebug/ Install Firebug] into this clean profile

OS X Way

  1. Exit Firefox
  2. Get to a command line
  3. Run Firefox with -p
    $ /Applications/Firefox.app/Contents/MacOS/firefox -ProfileManager
  4. Create New Profile
  5. Start Firefox with your new profile
  6. Install Firebug into this clean profile

Read more about this on Mozilla Support "Managing Profiles".

I installed Firebug but I don't see the icon. Where is it? If you use Firefox 3.6 or earlier you should see the Firebug icon in the status bar. Starting from Firefox 4.0 the Firebug Start Button moved to the toolbar. If it's not visible there, it can be found inside the Customize Toolbar dialog. For more info about this please read Honza's blog post.

Usage

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.

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

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)

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

How do I reset all Firebug options?

Firebug Menu > Options > Reset All Firebug Options

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

How does the Console panel work?

See the Console Panel description.

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

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

How does the HTML panel work?

See the HTML Panel description.

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 Expand Changes and Scroll Changes Into View.

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.

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.

CSS Panel

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

How to enabled the Console panel?

When the message appears that the Console Panel is disabled, you can click the "Enable" link inside of it. Open the Options Menu and click on "Enabled".

Script Panel

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.

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.

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

What do the different colors of the variables mean?

The DOM panel explains the different colors.

Net Panel

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.

Miscellaneous

Why doesn't Firebug integrate feature X?

This can have different reasons:

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.

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.

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.

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

If you have a specific issue you 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.

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

Where to get help?

General info

I can't install Firebug. What can I do?

Normally Firefox will tell you the reason when an extension couldn't be installed. Common reasons are:

  • The Firebug version you wanted to download is not compatible to the Firefox version you use. => Check the compatibility table above.
  • A file couldn't be written. => Restart Firefox and try again.
  • "Invalid file hash (possible download corruption)" => Try a new profile; Re-install Firefox.
  • You get an error message inside Firefox' Error Console like "installLocation has no properties" => Try a new profile; Re-install Firefox.

If you're using Windows, you can try the following:

  • With Firefox closed, locate your profile directory, delete these temporary files, they will be automatically re-created by Firefox:
    extensions.ini
    extensions.cache
    extensions.rdf
    compreg.dat
  • Disable any Antivirus or Backup program you may have running and then install Firebug.
    It may be that some software is stopping Firefox creating the file structures needed for the installation process.
  • Run Firefox as Administrator. It may be the same as in reason 2, because firefox doesn't have enough permissions.
  • Manually install Firebug.
    This can be done easily, just unzip the XPI (it's a normal zipped file with the extension changed) in your extensions folder, inside your profile. You should unzip firebug's XPI content inside a folder named 'firebug@software.joehewitt.com'. Do this with Firefox closed.

To get the XPI go to Firebug on addons.mozilla.org (AMO), right click on the "Add to Firefox" button and select Save Link As....

If your problem didn't get solved or your error message is not listed above:

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.

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.

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.

Specific problems

The awesome bar and some menus are displayed transparently. Why?

There's a bug in Firefox causing this. As a workaround you can turn off hardware acceleration via Firefox Button > Options > Advanced > General > Use hardware acceleration when available.

Why does resizing the Firebug frame display a gray block?

This is caused by other extensions. One of them is Lazarus: Form Recovery 2.3. This bug seems to be fixed in version 3.2. Another plugin that causes this issue is Pentadactyl.

Personal tools