console api

by jordwms

HTML

<button>printfStyle</button>
<button>byType</button>
<button>assert</button>
<button>trace</button>
<button>group</button>
<button>groupCollapsed</button>
<button>profile</button>
<button>time</button>

CSS

button {
    display:block; 
    margin: 1em;
}

JavaScript

var $buttons = $("button");
var handler = {
    printfStyle: function() {
        
        console.log("name: %s, value: %d", "Melon", 8000);
        console.log("buttons: %o", $("button"));
        
    },
    byType: function() {
        
        console.info("info msg");
        console.warn("warning msg");
        console.error("error msg");
        
    },
    assert: function() {
        
        console.assert(1 === 0, "1 must be 1.");
        
    },
    trace: function() {
        
        console.trace();
        
    },
    group: function() {
        
        console.group();
        console.log("A");
        console.log("B");
        console.log("C");
        console.groupEnd();
        
    },
    groupCollapsed: function() {
        
        console.groupCollapsed("groupA");
        console.log("A");
        console.log("B");
        console.log("C");
        console.groupEnd();
        
    },
    profile: function() {
        
        console.profile("css bolding");
        setTimeout(function profileHandler() {
        
            $buttons
            .css('font-weight', 'bold')
            .data('foo', 'bar');
            
        }, 2000);
        console.profileEnd("css bolding");
        
    },
    time: function() {
        
        console.time("timerA");
        
        setTimeout(function timerHandler() {
            
            console.timeEnd("timerA");
            
        }, 100);
        
    }
};

$buttons.click(function() {
    
    var name = $(this).text();
    
    console.log("[%s]", name);
    
    handler[name]();
    
});