consoleを自作する - みかづきブログその3

WebViewの中などconsoleがつかえない環境用にconsole.logとconsole.dirを自作しました。

JavaScript

(function(win, doc, $) {
    
    "use strict";

    var $console = $('<div id="console"></div>'),
        $inner = $('<div id="console-inner"></div>');
    
    _init();
    
    function _init() {
        $(doc.body).append($console.append($inner));
    }
    
    function log(txt) {
        $inner.append($('<p>').text(txt));
        $console.animate({scrollTop: $inner.height()}, 10);
    }
    
    function dir(obj, opt_parent) {
        var parents = opt_parent ? opt_parent + "." : "",
            keys, length, i;
        
        if (typeof obj === "object") {
            keys = Object.keys(obj);
            length = keys.length;

            for (i = 0; i < length; i++) {
                if (typeof obj[keys[i]] === "object") {
                    dir(obj[keys[i]], parents + keys[i]);
                } else {
                    log(parents + keys[i] + ": " + obj[keys[i]]);
                }
            }
        } else {
            log(parents + obj);
        }
    }
    
    win.$console = {
        log: log,
        dir: dir
    };
})(this, document, $);

SCSS

#console {
    display: block;
    position: fixed;
    bottom: 0; left: 0;
    border: none;
    width: 100%; height: 100px;
    color: #fff;
    font-size: 10px;
    background: rgba(0, 0, 0, .8);
    overflow: scroll;
    z-index: 9999;
    -webkit-overflow-scrolling: touch;
}

#console-inner {
    padding: 5px;
}

つかいかた

$console.log("hey!");
$console.dir({
    a: 0,
    b: {
        c: 1,
        d: 2
    }
});

DOMO

いまのところconsole.dirがオブジェクトしか表示できないのですが、まあはじめはこんなものでしょう。jQueryに依存しているのもいけてないので修正していこうと思います。

今回は以上です。

【追記】

jQueryに依存しないバージョンをつくりました。

続・consoleを自作する - みかづきブログその3