‘console’ is undefined

As shown in this post logging to the console can be very useful when writing JavaScript code. Unfortunately, the JavaScript console is not evenly supported by all browsers. You first have browsers which don’t know it at all (like IE8) and will throw the error which I use as the title of this post. And then even two browsers which do have a console object do not all implement the same functions.

Here’s a short overview of what’s supported by which browser (note that if you do not have the latest version of a specific browser, this particular version may not support all listed functions):

Function Firefox Chrome Internet Explorer Safari Opera
assert X  X  X
clear X  X
count X X  X  X  X
debug X X  X  X  X
dir X X  X  X
dirxml X  X  X  X
error X X  X  X
_exception X
group X X  X  X  X
groupCollapsed X X  X  X  X
groupEnd X X  X  X  X
info X X  X  X
log X X  X  X
markTimeline  X
profile X X  X
profileEnd X X  X
table X
time X X  X  X  X
timeEnd X X  X  X  X
timeline X
timelineEnd X
timeStamp X
trace X  X  X  X
warn X X  X  X

So even though there are quite a few functions supported by all browsers, you should still check whether the console exists and whether the particular function you want to use exists. But adding before each call to a console function a check for the console and for the function quickly becomes a pain.

A way to work around it is to:

  1. Create a dummy console object if console is not defined
  2. Create dummy functions for all functions not supported by the console object in this particular browser

The dummy console object is created by this code:

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

So simple, if the global console variable doesn’t exist, create one as an empty object. Now we’ve got either a real console object or a dummy object, we got rid of the error message saying that console is undefined. But we’ll still get errors when our code calls undefined functions. So let’s go through all functions and for each of them create a dummy function if missing:

(function() {
	var funcList = ["assert", "clear", "count", 
		"debug", "dir", "dirxml", "error", 
		"_exception", "group", "groupCollapsed", 
		"groupEnd", "info", "log", "markTimeline", 
		"profile", "profileEnd", "table", "time", 
		"timeEnd", "timeline", "timelineEnd", 
		"timeStamp", "trace", "warn"];

	var funcName;

	for (var i=0; i < funcList .length; i++) {
		funcName = funcList [i];
		if (!window.console[funcName]) {
			window.console[funcName] = function() {};
		}
	}
})()

Here a few explanations how this works. First wrapping it all in (function() { … })() is used to scope the variables we define in there, so that we do not pollute the global scope.

Then we define an array containing all known console functions and iterate through them. For each function, we check whether the console object (the real one or the dummy one) have such a function defined. If not, we assign an empty function. This is done by using the fact that functions of an object are just special properties of the object and that object properties are indexed.

So, using this, you will get rid of all errors related to the console being undefined or console functions being undefined, but of course since we add empty implementations, using these empty implementations will still have no effect.

Of course, instead of using empty implementations you could log the calls to console functions somewhere (e.g. an array) so that you can access it. If I ever need it, I might actually write some code for it and update this post.

Leave a Reply

Your email address will not be published. Required fields are marked *