I had the same problem back in the day but still continue to use firebug. Still have that problem but now I pretty much send ajax and java related items to another programmer in our company.

I know leaving debug code in production is not the best idea, but why not write a little wrapper function to test for the existence of the console object first. Something like:

function debug(msg)
{
if (typeof console != "undefined")
{
console.log(msg);
}
}

This way your debugging degrades gracefully and if you forget to remove a debug statement you are in the clear.

Hey Jonathan, do you have any recommendations on learning how to use firebug effectively?

You can pull in Firebug Lite, which will take care of all those little errors until the app is ready for deployment.

The wrapper function is safe, but I like to stick with the default API for debugging. What I do is write code at the beginning that defines the "console" object with empty methods if it is not already defined.

Joe has a script which can be used for this eventuality. It also has the side effect of allowing Firebug debugging to be used in other browsers:

http://www.getfirebug.com/lite.html

Oops! Tim beat me to it!

frankly I don't understand what's all the fuss about, firebug has some nice features - but nothing essential to development.

1. it's not like it replaces the text editor, each "live edit" I make there needs to be copied to the text editor as well.
2. instead of "breaking points" why not jsut use alert("!") ?
3. it's nice to visualize padding and margin before you finish a project to see if you did something wrong, but I can hardly see how that makes you stop using the firefox Javascript Console

LOL, I hear you... though I usually get a nasty error message in IE before we go to production. (That's because I've got IE set to display every error and I don't use Firebug Lite).

@Steve: Why create a new debug() function? Solving this issue is a matter of 2 lines of code:

if (!console)
    var console = {log: function(){}, trace: function(){}, [...]};

[...] = other Firebug functions one uses that need to be silenced if Firebug is not present.

Jonathan: And if you want to make sure that even other web developers don't notice you forgot to remove your debugging code, you can even overwrite the 'console' element based on a production-mode switch you put in somewhere ; ).

@Assaf: Alerts can break dynamic pages that rely upon things being asynchronous. An alert brings everything to a dead stop until you click the button which makes debugging a much longer and more difficult process in the end.

@Felix: I hadn't thought of that and its definitely a bit nicer than creating a new function. Thanks for the tip.

I think the solution is to have a rigorous QA process prior to deployment. The QA test environment shouldn't have any of the development tools you use installed thus making it easy to pick up on a forgotton console.log() statement.

That's of course if you have a QA team and/or cycle.

Hey Jonathan, I'd like to point you to two things:

1) we have a wrapper for firebug that lets you log statements but doesn't do anything until you enable it. It's tiny and stand-alone.

2) I'll also direct you to the Mootools Debugger.js file that emulates firebug for browsers without it (example of it in action). Very useful if you're trying to debug in something other than firefox.

I do something similar to Steve, except that I add a debug mode check. I also try to remember to do a search for any console references before I commit my changes to source control.

var $debug = false;
var $error = function(message) {
if ($debug) {
if (typeof console != 'undefined')
console.error('Error: ' + message);
else
throw(new Error('Error: ' + message));
}
};

I discovered recently that Firebug will actually allow bad logic to run. I was putting together http://searchpotato.devdawn.com and knocked it together pretty quickly.

It worked on firefox on both my machines, but not IE. I just assumed it was IE (i mean, come on, surely it's the TOOL you blame, not the wielder .. heh)

Ended up being some bad javascript coding on my part, the misassignment of variables i think, which i later found out, Firebug was letting through.

After disabling Firebug, Firefox no longer ran either.

So there you go. I like Firebug .. it's a cool tool. But just that. Doesn't magically make me a better programmer.

@Jonathan, Mr. Muskrat: I like alerts because they stop everything, that way I can stop and see what happend in that same moment. I guess working with firebug is a matter of style.
by the way, I love the new comment box!

@Assaf: If you find that using alert() works for your debugging, I'd guess you're not working on anything more complicated than click events; as soon as you start trying to debug mousemove or mouseover events, alert becomes useless.

Getting off the subject of console.log, one bit of advice: if you ever have an incomprehensible, impossible-to-solve javascript error that somebody keeps getting, try disabling firebug. It's only happened to me once, but I was pulling my hair out. Turns out Firebug was somehow suppressing the error. It's only happened to me once, but it's a good thing to keep in mind.

Jonathan,

I use a function that will log to the console when available, but put up an alert when it's not...


function cLog(str) {
if (typeof console == 'undefined') {
alert(str);
} else {
console.log(str);
}
}


it doesn't allow for some of console.log's goodness like comma seperated values, but for 95% of my debugging needs it works fine, and allows me to debug in Firefox and IE at the same time without needing to change my code.

It's just like those C programs which don't work when the asserts are disabled. Javascript is a real language now.

I don't think it was clear from earlier comments, so for anyone who missed it, firebug lite also has an ignore console stuff thing. You can set up your build system to include it in release mode, it'll be great.

But if that isn't for you, I'm not sure if it's a good idea to remove your debugging code - you never know when it's going to be needed. Dean Edwards' triple semi-colon convention might be useful. But remember not to avoid any side effects in your debug code.

Well after being annoyed with the same thing for a while now I wrote a few little methods to stop my debug code from breaking scripts in IE etc

Its based heavily on Joe's firebugx.js I just wrapped it up in a prettier box :)
I put together 2 different versions 1 for prototype users and another for use without any other libraries. Both can be found here: Stop console undefined errors