FireBug “console is undefined”

This is a response to Shreevatsa’s post of the same title.

I like the simplicity of that solution. In fact, I wish I thought of it a month ago when I needed it! Instead, I came up with a different, but possibly nicer, solution in the end.

My solution was to implement a simple Console object that wrapped the FireBug console object. The wrapper object checks whether FireBug exists, and if so, calls the appropriate console method. So in my client code, instead of calling console.log(...), for example, I call Console.log(...).

function Console () {
}

// To turn off all console features, set Console.enabled to false.
Console.enabled = true;

// Console.log(object[, object, ...]) - Print a message in the log. If
// FireBug is enabled, print the message in the FireBug
// console. Otherwise, do nothing.
Console.log = function () {
    if (Console.enabled && window.console && window.console.log) {
        console.log.apply(console, arguments);
    }
};

There are a couple of benefits to this. First of all, when you want to disable all logging, all you have to do is set Console.enabled to false. This is great if you make extensive use of the FireBug logging features, and don’t want to permanently remove all of the logging. Second of all, you can use this object from multiple different Javascript files, without having to write more code.

In the above code snippet I only implemented a wrapper for the console.log method; but you can wrap any or all of the console methods. Here are some more.

// Console.debug(object[, object, ...]) - Writes a message to the
// FireBug console, including a hyperlink to the line where it was
// called.
Console.debug = function () {
    if (Console.enabled && window.console && window.console.debug) {
        console.debug.apply(console, arguments);
    }
};

// Console.info(object[, object, ...]) - Writes a message to the
// console with the visual "info" icon and color coding and a
// hyperlink to the line where it was called.
Console.info = function () {
    if (Console.enabled && window.console && window.console.info) {
        console.info.apply(console, arguments);
    }
};

// Console.warn(object[, object, ...]) - Writes a message to the
// console with the visual "warning" icon and color coding and a
// hyperlink to the line where it was called.
Console.warn = function () {
    if (Console.enabled && window.console && window.console.warn) {
        console.warn.apply(console, arguments);
    }
};

// Console.error(object[, object, ...]) - Writes a message to the
// console with the visual "error" icon and color coding and a
// hyperlink to the line where it was called. If FireBug is not
// enabled, an alert box is displayed, requesting that the user enable
// FireBug to debug the problem.
Console.error = function () {
    if (Console.enabled && window.console && window.console.error) {
        console.error.apply(console, arguments);
    } else if (Console.enabled) {
        var errMsg = "";
        for (arg in arguments) {
            errMsg += arg;
        }
        alert("An error has occurred. Please enable FireBug to debug it. " + 
            errMsg);
    }
};

// Console.assert(expression[, object, ...]) - Tests that an
// expression is true. If not, it will write a message to the console
// and throw an exception.
Console.assert = function () {
    if (Console.enabled && window.console && window.console.assert) {
        console.assert.apply(console, arguments);
    } else if (Console.enabled && arguments[0] == false) {
        alert("An error has occurred. Please enable FireBug to debug it. " + 
            arguments[1]);
    }
};

// Console.dir(object) - Prints an interactive listing of all
// properties of the object. This looks identical to the view that you
// would see in the DOM tab.
Console.dir = function () {
    if (Console.enabled && window.console && window.console.dir) {
        console.dir.apply(console, arguments);
    }
};
Advertisements

3 thoughts on “FireBug “console is undefined”

  1. Just saw this… thanks, that’s very good; I’ll probably start using it myself 🙂

    I also didn’t know about the console.assert method; it saves a line or three of writing my own code… one thing that would be really nice to have in JavaScript is something like the C preprocessor’s stringification method, so that you can write an assert function in which “assert(x > 5);” actually fails with an alert message showing the expression (‘x>5’).

    • Malcolm says:

      There are a whole bunch of great console methods: http://getfirebug.com/console.html .

      Yes, I miss the C preprocessor “stringification” functionality as well; it doesn’t exist in many other languages. At least with FireBug, though, if you call Console.assert, it will provide a stack trace, where clicking an item in the trace will take you directly to that line of code in the Script tab! So that’s a pretty good replacement for the stringify C preprocessor functionality.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s