console api

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: %dwon", "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");
    $buttons
      .css('font-weight', 'bold')
      .data('foo', 'bar');
    console.profileEnd("css bolding");

  },
  time: function() {

    console.time("timerA");

    setTimeout(function() {

      console.timeEnd("timerA");

    }, 100);

  }
};

$buttons.click(function() {

  var name = $(this).text();

  console.log("[%s]", name);

  handler[name]();

});