A version of console that can be used on mobile devices such as iPads and iPhones

con.js

/**
 * @file    A version of console that can be used on mobile devices.
 * @author  James "JLo" Long <[email protected]>
 * @version 1.0.0
 * @license MIT
 */
var con = (function () {

    "use strict";

    /**
     * Element that displays the results.
     *
     * @private
     * @type    {Element}
     */
    var element;

    /**
     * Namespace for the console version.
     *
     * @namespace
     * @alias     con
     */
    var console = {};

    /**
     * Creates the element that will display the results.
     *
     * @private
     * @return  {Element}
     *          Element that will display the results.
     */
    function create() {

        element = document.createElement("ul");
        element.style.cssText = [
            "list-style-type: none",
            "margin: 0",
            "position:fixed",
            "bottom:0",
            "right:0",
            "width:300px",
            "height:200px",
            "background-color: #e5e5e5",
            "border: 1px solid #000",
            "z-index: 10000",
            "padding: 10px",
            "font-family: monospace",
            "overflow:auto"
        ].join(";");
        document.body.appendChild(element);

        return element;

    }

    /**
     * Plucks values from an array or array-like structure containing objects.
     * The function will either get the property or get the property and value
     * as an array.
     *
     * @private
     * @param   {Array}  array
     *          Array whose entries should be plucked.
     * @param   {String} property
     *          Property to pluck.
     * @param   {String} [value]
     *          Optional second value to pluck.
     * @return  {Array}
     *          Array of plucked values.
     *
     * @example <caption>Getting object values</caption>
     * var arr = [{name: "one"}, {name: "two"}];
     * arrayPluck(arr, "name"); // -> ["one", "two"]
     *
     * @example <caption>Getting object property and values</caption>
     * var arr = [{type: "word", value: "one"}, {type: "word", value: "two"}];
     * arrayPluck(arr, "type", "value");
     * // -> [["word", "one"], ["word", "two"]]
     */
    function arrayPluck(array, property, value) {

        return Array.prototype.map.call(
            array,
            typeof value === "string"
                ? function (entry) {
                    return [entry[property], entry[value]];
                }
                : function (entry) {
                    return entry[property]
                }
        );

    }

    /**
     * Converts the given object into a string. If the given object is null or
     * undefined, an empty string is returned.
     *
     * @private
     * @param   {?}      string
     *          Object to convert into a string.
     * @return  {String}
     *          Converted string.
     *
     * @example
     * asString("one");     // -> "one"
     * asString(1);         // -> "1"
     * asString([1, 2, 3]); // -> "1,2,3"
     * asString(null);      // -> ""
     * asString(undefined); // -> ""
     * asString();          // -> ""
     */
    function asString(string) {

        return (string === null || string === undefined)
            ? ""
            : String(string);

    }

    /**
     * Checks to see if the given object is a plain object. That is to say an
     * object literal, rather than another type of object.
     *
     * @private
     * @param   {?}  obj
     *          Object to test.
     * @return  {Boolean}
     *          True if a plain object, false otherwise.
     *
     * @example
     * isPlainObject({});                          // -> true
     * isPlainObject([]);                          // -> false
     * isPlainObject(document.createElement("a")); // -> false
     */
    function isPlainObject(obj) {

        var isPlain = (
            object !== null
            && typeof object === "object"
            && object !== window
        );

        if (isPlain) {

            try {

                if (
                    !object.constructor
                    || !Object.prototype.hasOwnProperty.call(
                        object.constructor.prototype,
                        "isPrototypeOf"
                    )
                ) {
                    isPlain = false;
                }

            } catch (ignore) {
            }

        }

        return isPlain;

    }

    /**
     * Converts the given object into a string that can be displayed.
     *
     * @param  {?}      obj
     *         Object to convert.
     * @return {string}
     *         String made from the object.
     *
     * @example
     * con.write(1);             // -> "1"
     * con.write(document.body); // -> "<body>"
     * con.write(true);          // -> "true"
     * con.write(null);          // -> "(null)"
     */
    console.write = function (obj) {

        var written = obj;

        if (typeof obj === "object") {

            if (Array.isArray(obj) || isPlainObject(obj)) {
                written = JSON.stringify(obj);
            } else if (obj instanceof Node) {
                written = this.element(obj);
            }

        } else if (typeof obj === "boolean") {

            written = obj
                ? "true"
                : "false"

        } else if (obj === null) {
            written = "(null)";
        } else if (obj === undefined) {
            written = "(undefined)";
        }

        return String(written);

    };

    /**
     * Converts an element into a string, displaying all the element's
     * attributes. Although you can call this function directly,
     * {@link con.write} will automatically parse elements like this.
     *
     * @param  {Element} el
     *         Element to convert.
     * @return {String}
     *         String representation of the element.
     *
     * @example
     * // Element is
     * // <div id="one" class="alpha">Lorem ipsum</div>
     * con.element(document.getElementById("one"));
     * // -> "<div id=\"one\" class=\"alpha\">"
     */
    console.element = function (el) {

        var string = "<" + el.nodeName.toLowerCase();

        arrayPluck(el.attributes, "name", "value").forEach(function (pair) {
            string += " " + pair[0] + "=\"" + pair[1] + "\"";
        });

        return string + ">";

    };

    /**
     * Writes a message to the log, prepending it to the start of the logged
     * messages.
     * <br><br>
     * The message needs to be a string and needs to be passed as the first
     * argument - this version cannot handle the <code>sprintf</code> style that
     * native implementations do. If you need to render an object, use
     * {@link con.write} to convert the object into a string.
     * <br><br>
     * A CSS string of additional styles can be passed as the second argument,
     * allowing the console messages to render differently and be easier to see.
     *
     * @function
     * @memberof con
     * @name     log
     * @param    {String} message
     *           The message to display.
     * @param    {String} [extraStyles]
     *           Optional CSS string of additional styles.
     *
     * @example <caption>A simple message</caption>
     * con.log("hello world");
     *
     * @example <caption>Displaying an element</caption>
     * con.log("Click heard on " + con.write(element));
     *
     * @example <caption>Providing additional styles for the message</caption>
     * con.log("hello world", "font-weight:bold;color:blue");
     */

    /**
     * Alias of {@link con.log}.
     *
     * @function
     * @memberof con
     * @name     debug
     * @param    {String} message
     *           The message to display.
     * @param    {String} [extraStyles]
     *           Optional CSS string of additional styles.
     */
    console.log = console.debug = function (message, extraStyles) {

        var el = document.createElement("li");
        el.style.cssText = "padding-left:2em;text-indent:-2em;" + asString(extraStyles);
        el.appendChild(document.createTextNode(message));

        (element || create()).insertBefore(el, element.firstChild);

    };

    /**
     * Displays an error message in the log.
     *
     * @param {String} message
     *        Message to display.
     */
    console.error = function (message) {
        console.log(message, "color:red;");
    };

    /**
     * Clears the display.
     */
    console.clear = function () {
        (element || create()).innerHTML = "";
    }

    return console;

}());