Console.js とは?
firebugなどであれをHTMLで再現。
使い方
cssとjavascriptファイルを読み込みます。
HTML
<script type="text/javascript" src="console.js"></script>
<link rel="stylesheet" href="console.css" type="text/css" charset="utf-8">
あとはnewするか、仮想コンストラクタ叩くもよし。
サンプル
実行結果
Log
Info
Warn
Error
クリア
Javascript
var foo = {a: 'aaa', b: 'bbb'};
var bar = {c: 'ccc', b: 'ddd'};
var _console = Console('console-window1');
_console.log('コンソール');
$('#console-log1').on('click', function(e){
var _console = Console('console-window1');
_console.log(foo, bar);
});
$('#console-info1').on('click', function(e){
var _console = Console('console-window1');
_console.info(foo, bar);
});
$('#console-warn1').on('click', function(e){
var _console = Console('console-window1');
_console.warn(foo, bar);
});
$('#console-error1').on('click', function(e){
var _console = Console('console-window1');
_console.error(foo, bar);
});
$('#console-clear1').on('click', function(e){
var _console = Console('console-window1');
_console.clear();
});
HTML
<span id='console-log1' class="cq-btn cq-btn-mini">Log</span>
<span id='console-info1' class="cq-btn cq-btn-mini">Info</span>
<span id='console-warn1' class="cq-btn cq-btn-mini">Warn</span>
<span id='console-error1' class="cq-btn cq-btn-mini">Error</span>
<span id='console-clear1' class="cq-btn cq-btn-mini">クリア</span>
<div id="console-window1"></div>
1つのドキュメント内で複数のコンソールウインドウを作りたかったんだけどsingletonらしく1箇所にしか作れませんでした。
あまり調べてないので実はやり方があるのかもしれません。