6

I use Firebug's console.log() for debugging my website. If I try viewing my website in browsers without Firebug then I get a console is not defined error. Is there a way to gracefully avoid this error?

I found this potential solution, but it seems a bit cumbersome. And ideas?

hoju
  • 28,392
  • 37
  • 134
  • 178

9 Answers9

17

Firebug source code provides a file to do this :

See firebugx.js

Do not reinvent the wheel every day :)

OcuS
  • 5,320
  • 3
  • 36
  • 45
  • This is actually a really good solution, especially if you use the other functions like `warn` and `error`. – Igor Zevaka Jan 18 '10 at 10:26
  • 3
    Link failed for me. I think this is the same: http://code.google.com/p/fbug/source/browse/branches/firebug1.5/lite/firebugx.js – Matthew S May 12 '10 at 02:50
  • Thanks Matthew, I've fixed the link even if it's not the last version of the file (which I cannot find anywhere in firebug's svn repository) – OcuS Dec 23 '10 at 16:14
  • the code looks strange (or should i say wrong) to me. if (!window.console || !console.firebug) {...} creates the dummy console if one of the consoles is missing. I think it should be && instead of ||. – Hajo Thelen Mar 06 '13 at 12:16
  • @HajoThelen: I guess you are kinda right but by the time this answer was made, there was no other browser with the "console" object like Google Chrome has now. So this answer is only valid with Firefox. – OcuS Mar 06 '13 at 14:06
  • 1
    Please, be aware of `console.firebug` is not present in other browsers and nowadays even in Firefox with Firebug installed and opened making the whole console ignoring stuff to take in action. Thus I'd recommend to change `|| !console.firebug` into just `|| !console`. – shadyyx Jul 01 '15 at 07:58
4

I always create my cross-browser wrappers for console.log alike functions and it looks like this:

function log(a){
try{
  console.log(a);
  }catch(er){
   try{
     window.opera.postError(a);
     }catch(er){
     //no console avaliable. put 
     //alert(a) here or write to a document node or just ignore
     }
  }

}

It can be extended for any browsers. in IE when in debug I'd recommend putting this jquery code in last catch:

$('body').append('<pre>'+JSON.serialize(a)+'</pre>');

You must add JSON.serialize to Your script. IE doesn't have it (IE8 might have, I'm not sure)

naugtur
  • 16,827
  • 5
  • 70
  • 113
3

The linked solution is basically a variant(with a few extra functions) of this:

EDIT The below code doesn't actually work when firefox is present. That'll teach for posting code without checking just to show off my not so 1337 operator || skillz:

window.console = window.console || {};
console.log = function(){};

The reason for that is that firefox console is actually a getter only property off window. Hence we can't set it. Instead, something like this needs to be used:

if (!window.console) {
  window.console = {};
  window.console.log = function(){};
}

Also, console.log (and console.warn, console.error) will work on Webkit browsers, including mobile Safari, pretty cool, huh?

Igor Zevaka
  • 74,528
  • 26
  • 112
  • 128
2

I don't think it gets much better than the workaround you link to. It's of course possible to melt it down to just defining console.log() and leave off rest, but in essence, you won't get around a construct like this.

Only alternative that comes to mind is checking for console.log every time you call it, and that's even more cumbersome.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
2

Honestly, I'd use that. It not only covers console.log(), but also every other console method, and in a decently short number of lines. The fact that it was first used in the Yahoo media player seems to suggest that it works excellently cross-browser, as well.

That bit of code is your best bet, is actually decently elegant, and should work in most every case. As long as you comment above the snippet just what it is for (so as not to confuse future developers), you should be fine.

Matchu
  • 83,922
  • 18
  • 153
  • 160
1

The solution of @OcuS is sure the best, but you can enhance it with mine: Check this way to log to FF Console: Log to Firefox Error Console from JavaScript

Then add to the firebugx.js this 3 lines inside IF:

window.console['error'] = li
window.console['warn'] = li
window.console['debug'] = li

So you will see the log of every console error, warn and debug even when the Firebug is closed

Community
  • 1
  • 1
Fabiano Soriani
  • 8,182
  • 9
  • 43
  • 59
1

You can use this code to check if console object exists

if('console' in window && 'log' in window.console)
{
    // code using console.log here
}

Or this code

if(typeof window.console != 'undefined'
&& typeof window.console.log != 'undefined')
{
    // code using console.log here
}

Also you can read this post http://alexandershapovalov.com/firebug-console-is-not-defined-60/ Inside the post link how to create jQuery wrapper for console

Yaplex
  • 2,272
  • 1
  • 20
  • 38
0

My final solution:

if(!("console" in window)) 
    window.console = {log: function() {}};
hoju
  • 28,392
  • 37
  • 134
  • 178
-1

Off the top of my head:

if(!console)
{
     console = {};
     console.log = function() { };
}
JoshJordan
  • 12,676
  • 10
  • 53
  • 63