Monday, January 28th, 2008
Graceful Degradation of Firebug Console Object
Category: Debugging
, JavaScript, Tip
Paul Irish saw the following graceful degradation of Firebug code in the Yahoo! media player:
JAVASCRIPT:
-
-
// code yanked from the Yahoo media player. Thanks, Yahoo.
-
if (! ("console" in window) || !("firebug" in console)) {
-
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group"
-
, "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
-
window.console = {};
-
for (var i = 0; i <names.length; ++i) window.console[names[i]] = function() {};
-
}
-
I would love to see a window.console API based on Firebug standardized so it can just be there. But then this code will still be around for pre-browsers.
2.6 rating from 29 votes
I think you will find that the makers of Firebug also have a js file that can be used in other browsers?
http://www.getfirebug.com/lite.html
Hi,
You can use Companion.JS ( http://www.my-debugbar.com/wiki/CompanionJS/HomePage ) to have “console.log” feature on IE like Firebug. Version 0.3 should be launched soon with some corrections.
JFR
http://www.debugbar.com
That’s part of the code from Firebug lite, from the makers of Firebug (http://www.getfirebug.com/lite.html)
The difference is that Firebug Lite still implements some of the core FireBug functionality for IE, Opera, Safari, etc. That’s great when you’re still developing, but when you go to production, this is nice to allow your code to work as-is without including any additional overhead.
Nevermind, I see Firebug Lite actually provides this exact code (http://www.getfirebug.com/firebug/firebugx.js)
You might check out my console wrapper that does a little more than this:
http://clientside.cnet.com/wiki/cnet-libraries/02-utilities#dbug.js
It lets you send log commands to the console and then enable them at a later time. This is useful if you’re using a bookmarklet to generate a console in other browsers. You can leave your debugging statements in your code and then use your bookmarklet to bring up a console, then type dbug.enable() and see all your log statements…
It’s a stand alone file - no framework required or anything. It’s also pretty small (about 2K packed).
Please enlighten me to why console.X calls are [used|waste space] in production code. Is it so that other developers running Firebug can report bugs for you? Why not use AOP so that the calls can be easily removed when the site goes live?
Also, optimized loop:
for (var i = names.length - 1; i > -1; --i).
Hey, why don’t I use that technique all the time? We should be counting backward through arrays more often.
@Charles:
Because backward loops are plain weird; call it a failing of the human psyche. Well, that, and the fact that it’s impossible to adjust the length of the array in the same loop; it’ll skip items or reference items that no longer exist.
When the array length isn’t fixed, use a classic loop. Otherwise, a quick test can show you that a dual-variable loop works just as fast as a backward loop:
for (var i = 0, j = names.length; ihmm, my post got mangled up. second try:
for (var i = 0, j = names.length; i
Hmm I do believe there’s something wrong with the regexp parsing the comments.
for (var i = 0, j = names.length; i SMALLERTHEN j; i++)