Handy JavaScript console Methods

_handy-console-methods.md

Handy console methods

log

Prints to the console:

console.log('Hello World!')

String Interpolation

console.log("%s %s pass!", 'You', 'shall not')

• %s - string
• %d, %i - integer
• %f - float
• %o - expandable DOM element
• %O - expandable JavaScript object
• %c - applies CSS rules to output string

Example for %c

console.log('You! Shall! Not! %cPass!', 'color: orange; font-weight: bold')

The word 'pass' will have the color and font weight applied in the console output.

error

Prints an error message in red in the console:

console.error('Bad Response.')

warn

Prints a warning message to the console:

console.warn("You shouldn't have done that.")

assert

Tests if an assertion is true.

console.assert(1 === 1) // This assertion will pass.

console.assert(balrag.shallPass(), 'You shall not pass!') // accepts an optional error message

group and groupEnd

Groups console output together.

console.group('Hobbits passing.');
hobbits.shallPass();

if (balrag.shallNotPass()) {
    console.log('You shall not pass!');
}

console.log('Hobbits safe...for now.');
console.groupEnd();

Measuring Time

Similar to group and groupEnd.

console.time('Loop');
// long for loop
console.timeEnd('Loop')

debugger.js

/**
 * Debugger that takes advantage of some of the lesser known features of the
 * JavaScript console. I recommend you create a boolean debug setting in your
 * JavaScript and only execute this code when debug === true.
 */
;(function(window) {
    "use strict";

    /**
     * Creates a Debugger instance
     * @class
     */
    var Debugger = function() {
        // What?! Styles in the console? Cool.
        console.log('%cYou are running the custom debugger.', 'color: blue; font-family: sans-serif;');
    };

    /**
     * Creates a new group for console messages and sends messages to
     * Debugger.router for parsing
     * @extends Debugger
     * @param {string} method_name - The console method you wish to use: log, error or warning
     * @param {string} group_name - The name you wish to use for the console.group method
     * @param {array} msgs - An array of objects with a name: value pair to write to the console
     */
    Debugger.prototype.writeMessages = function(method_name, group_name, msgs) {
        console.group(group_name);
        this.router(method_name, msgs);
        console.groupEnd();
    };

    /**
     * Writes message to the console using method_name to decide which console method to use.
     * @extends Debugger
     * @param {string} method_name - The console method you wish to use: log, error or warning
     * @param {array} msgs - An array of objects with a name: value pair to write to the console
     */
    Debugger.prototype.router = function(method_name, msgs) {
        $.each(msgs, function(key, value) {
            $.each(value, function(k, v) {
                if (method_name === 'log') {
                    console.log(k + ': ', v);
                } else if (method_name === 'error') {
                    console.error(k + ': ', v);
                } else if (method_name === 'warning') {
                    console.warn(k + ': ', v);
                }
            });
        });
    };

    /**
     * Uses this.assertBoolean to assert that a variable is false
     * @param {boolean} v - the variable to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertFalse = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertBoolean(v, false, em);
    };

    /**
     * Uses this.assertBoolean to assert that a variable is true
     * @param {boolean} v - the variable to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertTrue = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertBoolean(v, true, em);
    };

    /**
     * Uses the console.assert() method to assert that a variable is true
     * @param {boolean} v - the variable to test
     * @param {boolean} t_f - condition to test against (true or false)
     * @param {string} error_msg - error message
     */
    Debugger.prototype.assertBoolean = function(v, t_f, error_msg) {
        if (typeof v !== 'boolean') {
            this.writeMessages('error', 'Debugger.assertBoolean', "Variable is not boolean. Pass a boolean value or try another assertion.");
        } else {
            console.assert(v === t_f, error_msg);
        }
    };

    /**
     * Uses the this.assertType to check if a variable or object is defined
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertUndefined = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertType(v, 'undefined', em);
    };

    /**
     * Uses the this.assertType to check if a variable or object is an object 
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertObject = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertType(v, 'object', em);
    };

    /**
     * Uses the this.assertType to check if a variable or object is null
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertNull = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertType(v, 'null', em);
    };

    /**
     * Uses the this.assertType to check if a variable or object is a number
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertNumber = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertType(v, 'number', em);
    };

    /**
     * Uses the this.assertType to check if a variable or object is a string
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertString = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertType(v, 'string', em);
    };

    /**
     * Uses the this.assertType to check if a variable or object is an array
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertArray = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        this.assertType(v, 'array', em);
    };

    /**
     * Uses the console.assert() method to check for a given data type
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} v_type - the data type
     * @param {string} error_msg - error message
     */
    Debugger.prototype.assertType = function(v, v_type, error_msg) {
        console.assert(typeof v === v_type, error_msg);
    };

    /**
     * Uses the console.assert() method to check if a var is defined
     * @param {(boolean|null|undefined|number|string|object|array)} v The var to test
     * @param {string} [error_msg] - optional error message
     */
    Debugger.prototype.assertExists = function(v, error_msg) {
        var em = this.setAssertionErrorMessage(error_msg);
        console.assert(typeof v !== 'undefined', error_msg);
    };

    /**
     * Provides a consistent way to set a default error message for assertions.
     * @param {(string|undefined)} [msg] - optional error message.
     * @returns A default error message if msg is undefined, otherwise the passed message
     */
    Debugger.prototype.setAssertionErrorMessage = function(msg) {
        if (typeof msg === "undefined") {
            return "Did not pass.";
        }
        return msg;
    };

    window.Debugger = Debugger;
})(window);
var dbgr = new Debugger();

examples.md

Debugger Example

You'll need to include JQuery for debugger.js to work.

var test_function = function() {
    dbgr.writeMessages('log', 'test_function', [{'msg': 'Hello World.'}]);
};

The console output from above will look something like this:

test_function

msg: Hello World.

I find this handy when trying to debug the order things are executed and also where in the code things are happening.