HOME > >

ConsoleJS

Console.js とは?

firebugなどであれをHTMLで再現。

使い方

cssとjavascriptファイルを読み込みます。

HTML

  1. <script type="text/javascript" src="console.js"></script>
  2. <link rel="stylesheet" href="console.css" type="text/css" charset="utf-8">

あとはnewするか、仮想コンストラクタ叩くもよし。

サンプル

実行結果

Log Info Warn Error クリア

Javascript

  1. var foo = {a: 'aaa', b: 'bbb'};
  2. var bar = {c: 'ccc', b: 'ddd'};
  3.  
  4. var _console = Console('console-window1');
  5. _console.log('コンソール');
  6.  
  7. $('#console-log1').on('click', function(e){
  8.     var _console = Console('console-window1');
  9.     _console.log(foo, bar);
  10. });
  11.  
  12. $('#console-info1').on('click', function(e){
  13.     var _console = Console('console-window1');
  14.     _console.info(foo, bar);
  15. });
  16.  
  17. $('#console-warn1').on('click', function(e){
  18.     var _console = Console('console-window1');
  19.     _console.warn(foo, bar);
  20. });
  21.  
  22. $('#console-error1').on('click', function(e){
  23.     var _console = Console('console-window1');
  24.     _console.error(foo, bar);
  25. });
  26.  
  27.  
  28. $('#console-clear1').on('click', function(e){
  29.     var _console = Console('console-window1');
  30.     _console.clear();
  31. });

HTML

  1. <span id='console-log1' class="cq-btn cq-btn-mini">Log</span>
  2. <span id='console-info1' class="cq-btn cq-btn-mini">Info</span>
  3. <span id='console-warn1' class="cq-btn cq-btn-mini">Warn</span>
  4. <span id='console-error1' class="cq-btn cq-btn-mini">Error</span>
  5. <span id='console-clear1' class="cq-btn cq-btn-mini">クリア</span>
  6.  
  7. <div id="console-window1"></div>

1つのドキュメント内で複数のコンソールウインドウを作りたかったんだけどsingletonらしく1箇所にしか作れませんでした。 あまり調べてないので実はやり方があるのかもしれません。