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:

// 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() {}; } [/javascript] 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.

Posted by Dion Almaer at 6:37 am
11 Comments

++++-
4.7 rating from 339 votes

11 Comments »

Comments feed TrackBack URI

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

Comment by 800px — January 28, 2008

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

Comment by jfrabaute — January 28, 2008

That’s part of the code from Firebug lite, from the makers of Firebug (http://www.getfirebug.com/lite.html)

Comment by Edd Couchman — January 28, 2008

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.

Comment by pothoven — January 28, 2008

Nevermind, I see Firebug Lite actually provides this exact code (http://www.getfirebug.com/firebug/firebugx.js)

Comment by pothoven — January 28, 2008

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

Comment by Aaron N. — January 28, 2008

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?

Comment by Charles — January 28, 2008

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.

Comment by Charles — January 28, 2008

@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; i

Comment by DiSiLLUSiON — January 28, 2008

hmm, my post got mangled up. second try:

for (var i = 0, j = names.length; i

Comment by DiSiLLUSiON — January 28, 2008

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

Comment by DiSiLLUSiON — January 28, 2008

Leave a comment

You must be logged in to post a comment.