firebug / firebug-lite Goto Github PK
View Code? Open in Web Editor NEWFirebug Lite: doing the Firebug way, anywhere.
Home Page: http://getfirebug.com/firebuglite
License: Other
Firebug Lite: doing the Firebug way, anywhere.
Home Page: http://getfirebug.com/firebuglite
License: Other
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:
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:
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.
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
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)
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.
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.
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.
This was initially reported in issue 6545.
I imagine a simple: right click -> save as...
Opens a save menu.
Allows for saving to a text file.
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!
have to use chrome-extension://MSG_@@extension_id/path/image.png and add the images to web_accessible_resources
In one webpage, I find a css style's priority is different with the chrome browser.
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.
Firebug version (number):1.4.0.11967
Browser version:33.0.1750.117
Operating system:OSX 10.8.5
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!
Hi,
Can you please incorporate firebug-lite with firepath? Is this possible?
Any answers for this?
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 worldThat does not work anymore.
=>Please provide a compressed version in this github repo.
Also see
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.
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,
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.
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();
}
})();
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!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.