firebug / firebug-lite

Firebug Lite: doing the Firebug way, anywhere.

Firebug

Web Development Evolved getfirebug.com

On November 14, with the launch of Firefox Quantum (AKA 57), support for old school extensions will stop in Firefox. That means Firebug will no longer work for many developers. However, the work continues in the great Firefox devtools. You can try Firefox devtools by updating your release browser or downloading Developer Edition. Read more here

Download

License

Firebug is free and open source software distributed under the BSD License.

Source Repository Structure

See more information about Firebug repository structure.

• extension Firebug extension directory.
• tests Firebug automated test files and test harness.
• trace Firebug tracing console.

Build Firebug XPI

In order to build Firebug *.xpi package run following in your command line (you need Apache Ant)

$ cd firebug/extension
$ ant

The *.xpi file should be located within ./release directory.

Run Firebug From Source

The extension directory directly contains Firebug extension files and so, you can run Firebug directly from it. This is the recommended way how to quickly test your code changes and provide a patch.

1. Locate your Firefox profile folder
2. Open extensions/ folder, create if it doesn't exist.
3. Create a new text file and put the full path to your development folder inside. (e.g. C:\firebug\extension\ or ~/firebug/extension/). Windows users should retain the OS' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
4. Save the file with Firebug ID as it's name [email protected]

Hacking on Firebug

See detailed instructions about how to provide a patch to Firebug source.

Further Resources

• Home: https://getfirebug.com/
• Blog: https://blog.getfirebug.com/
• Twitter: https://twitter.com/#!/firebugnews
• Discussion Group: https://groups.google.com/forum/?fromgroups#!forum/firebug
• Wiki: https://getfirebug.com/wiki
• Report an Issue: http://code.google.com/p/fbug/issues/list
• Firebug Extensions: https://getfirebug.com/extensions

firebug-lite's Issues

Firebug lite breaks when using angular.js

Firebug Lite breaks when using angular.js with the following message:

Uncaught TypeError: Cannot call method 'push' of undefined firebug-lite-beta.js:30905
logRow firebug-lite-beta.js:30905
logFormatted firebug-lite-beta.js:30894
sysout firebug-lite-beta.js:30842
FBL.ns.CssAnalyzer.processAllStyleSheets firebug-lite-beta.js:25751
FBL.ns.FBL.Firebug.initialize firebug-lite-beta.js:6289
(anonymous function)

the css priority error

Description:

In one webpage, I find a css style's priority is different with the chrome browser.

TEST CASE:

• Open http://theiphoneappslist.com/
• There are many links with the name of "Readmore" who have a blue background image.
• Open firebug, in the HTML locate one of the Readmore span.
• In the right style section, you will see the following styles:

style.css

a.readmore span {
  background-image:url(http://theiphoneappslist.com/wp-content/themes/PersonalPress/images/readmore.png);
  background-position:initial initial;
  background-repeat:no-repeat no-repeat;
  display:block;
  height:34px;
  padding:0 0 0 14px;
}

style-Teal.css

a.readmore span, .reply-container a {
  background-attachment:scroll;
  background-color:transparent;
  background-image:url(http://theiphoneappslist.com/wp-content/themes/PersonalPress/images/teal/readmore.png);
  background-position:0 0;
  background-repeat:no-repeat no-repeat;
}

In fact the first image is brown not blue. The second one which is belong to style-Teal.css is stroke-throunged. But this file is loaded after style.css and used by the browser.

Environment:

Firebug version (number):1.4.0.11967
Browser version:33.0.1750.117
Operating system:OSX 10.8.5

Firebug Lite currently doesn't scroll the Console panel to the bottom.

per: https://code.google.com/p/fbug/issues/detail?id=5345

Firebug Lite currently doesn't scroll the Console panel to the bottom. See http://getfirebug.com/firebuglite. This isn't Safari specific.

Therefore I keep this as enhancement request for Firebug Lite.

Note that Firebug Lite development is currently put on ice due to a lack of resources. So if you want this to be implemented soon, feel free to provide a patch.

Sebastian

This "solves" it, but I'm presently to busy to branch and insert myself.

(function() {
    var target = document.getElementById('fbConsole');
    if (target) {
        // create an observer instance
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    var a = mutation.addedNodes;
                    if (a.length) {
                        a[a.length - 1].scrollIntoView();
                    }
                }
            });
        });

        // configuration of the observer:
        var config = {
            childList: true
        };

        // pass in the target node, as well as the observer options
        observer.observe(target, config);

        // later, you can stop observing
        // observer.disconnect();
    }
})();

debugger.css references invalid image files

the debugger.css file references images that don't exist. for example condBorders.png.

This can cause issues if you are using any postprocessing to manage static resources, as the invalid references can crash certain tools. For example - this one with django's ManifestStaticFilesStorage

Allow to save Console output to file

This was initially reported in issue 6545.

• a DETAILED DESCRIPTION of how you imagine the feature

I imagine a simple: right click -> save as...
Opens a save menu.
Allows for saving to a text file.

• a TEST CASE (no matter how trivial)
  add:
  Firebug.Console.log(targ);
  to:
  onInspectingClick in firebug-lite.js

This will add the HTML code of the inspected items to console.
Next, in the console window, right click -> save as...
Save the log to a file.

What should be implemented/improved?
Console Output to file.

Browser version: Preferred Chrome (Firefox,etc...)
Operating system: Any

Thank you!

url.indexOf returning undefined

I don't know enough about the code the understand what was going wrong for me but on line 1152 of firebug-lite.js in version 1.4.0 the variable url was coming in as an Object rather than as a string and so the method url.indexOf was undefined:

this.parseURLParamsArray=function(url){var q=url?url.indexOf("?"):-1;

A patch was to always ensure that url was a string before calling indexOf (i.e. url.toString().indexOf):

this.parseURLParamsArray=function(url){var q=url?url.toString().indexOf("?"):-1;

Sorry for not knowing being able to say why this was happening but I thought it better to report in any case.

And thanks for a great piece of software.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of firebug/firebug-lite!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library firebug/firebug-lite is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "firebug/firebug-lite",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Remote debugging feature integration

http://remotedebug.org/ tries to use the remote debugging protocol of each browser and creates a bridge between a devtool and all these browsers, so it becomes possible to use same devtool across multiple devices.
Firebug-lite should try exporting this feature in its core.

Firebug Lite for mobile debugging

Hi, is it possible to use Firebug Lite for mobile (Android browser, Android Chrome) debugging?

In my case I use an Android emulator and want to debug some CSS issues.
I know there is already a solution to remotely debug via weinre, but it would be really nice have this feature implemented in Firebug Lite.

Incorporate with firepath or any element specifier with firebug-lite?

Hi,

Can you please incorporate firebug-lite with firepath? Is this possible?
Any answers for this?

The Stable Bookmarklet does not start Firebug

I have first seen this bug in IE9, but cannot reproduce it there. However, the bug is also present in Firefox (tested version 13 and 25).

There are not so many steps involved:

1. Create a bookmarklet for the stable version of Firebug Lite 1.4
2. Go to a simple page, e.g. google.com
3. Invoke Bookmarklet
4. Nothing happens

Via the builtin firebug I can see, that the JS gets loaded. But I don't see an error on the console or the like.

Interestingly, the Debug Bookmarklet works fine and afterwards the normal bookmarklet works as well. You can reproduce that with the following steps:

1. Create a bookmarklet for the stable version of Firebug Lite 1.4
2. Create a bookmarklet for the debug version of Firebug Lite 1.4
3. Go to a simple page, e.g. google.com
4. Invoke Stable Bookmarklet ==> nothing happens
5. Reload page
6. Invoke Debug Bookmarklet ==> Firebug Lite opens
7. Reload page
8. Invoke Stable Bookmarklet ==> Firebug Lite opens

The Stable Bookmarklet will now work until the browser is restarted. I thing there is some JS or resource missing in the stable version, that is downloaded and cached by the debug version.

I hope you can find the bug, it's really nasty if "stable" does not work, but debug does. This bug did cost me around 2h, since I didn't understand why I couldn't get Firebug Lite to work.

Question about Firbebug-lite

I am researching about DOM manipulations for my team (front and back end developer), I am not developer but I read alot, research and understand techology.

My question is next:

Can we for example load some website into iframe in our APP, and then manipulate DOM by, editing, deleting, drag and dropping elements ? I saw many kind of examples in Website Builder apps, or on Optimizely.com https://www.youtube.com/watch?v=0S0IrbwpfzE .

Any help or points welcome. Also, developer with Ractive and DOM experience are welcome for paid work.

Peace,

Not able to integrate in IE10

Hi,
I am try to integrate firebug lite 1.4.0, to IE10.
I got below issue, Please let me know what I did wrong.

Thanks
Kannan

Image paths hardcoded in firebug.css

have to use chrome-extension://MSG_@@extension_id/path/image.png and add the images to web_accessible_resources

Please provide alternative to optaining compressed firebug light from https://getfirebug.com/

In the past I could inlude a link to http://getfirebug.com to retrieve a compressed version of firebug light:

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js#startOpened"></script> Hello world

That does not work anymore.

=>Please provide a compressed version in this github repo.

Also see

https://stackoverflow.com/questions/58521474/how-to-include-firebug-light-without-access-to-http-getfirebug-com

Copyrighted icc-profile in skin pictures

Hi,
I found copyrighted ICC-profile in some of skin's pictures according to samccone/monocle#22.

I tested https://getfirebug.com/releases/lite/1.4/skin/ :

./xp/textEditorBorders.png : Copyright: Copyright Apple Computer, Inc., 2003
./xp/textEditorCorners.png : Copyright: Copyright Apple Computer, Inc., 2003
./light/detach.png : Copyright: Copyright (c) 1998 Hewlett-Packard Company
./light/sprite.png : Copyright: Copyright (c) 1998 Hewlett-Packard Company
./light/textEditorBorders.png : Copyright: Copyright Apple Computer, Inc., 2003
./light/detachHover.png : Copyright: Copyright (c) 1998 Hewlett-Packard Company
./light/close.png : Copyright: Copyright (c) 1998 Hewlett-Packard Company
./light/closeHover.png : Copyright: Copyright (c) 1998 Hewlett-Packard Company
./light/textEditorCorners.png : Copyright: Copyright Apple Computer, Inc., 2003
./classic/textEditorBorders.png : Copyright: Copyright Apple Computer, Inc., 2003
./classic/textEditorCorners.png : Copyright: Copyright Apple Computer, Inc., 2003

I think this is not ok with your main BSD license.

No documentation for options

Hello,

I was just trying to drop this into a project, but it was painful because there is no documentation on each of the options that is listed at https://getfirebug.com/firebuglite#Options

Some of them are obvious. Here are the ones that I found non-obvious and my questions about them. Thanks!

• enableTrace: What is trace? I seem to get log messages no matter how this is set.
• enablePersistent: Persistent what?
• disableWhenFirebugActive: Disable what?
• disableXHRListener: Setting this to true causes an error in IE10 of "Object doesn't support property or method 'getNativeXHRObject'" - Shouldn't things not be attempting to get native XHR objects when disableXHRListener is true?

How to shrink the font size smaller? Ctrl - not working beyond a certain size.

I can't decrease the font nearly as small as I would like.
I'm using Firebug-Lite on a tablet (Android Chrome)

I'm able to edit the accessibility settings in Google Chrome for Android to make fonts very, very small, but that doesn't translate to smaller text for Firebug-Lite.

Firebug ignores console.log CSS options

Chrome allows for some CSS formatting of output when using console.log
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object

It would be best if Firebug simply ignores it instead of trying to perform a replacement.

Check the following Plunker: http://plnkr.co/edit/CczHE3?p=preview