金曜日, 7月 20, 2007

Firebugのconsole.logをIEでも使いたいとき

JavaScriptの開発には欠かせないFirebugではログを書き出すのにconsole.logをよく使用します。 うっかりこれを残したままにしてjsファイルを保存すると、 Internet Explorerで開いたときにエラーが出て悲しい想いをすることになります。 IEでもconsole.logをコメントアウトしたりしないで使えるようにサンプルを書いてみました。

JavaScriptカスタムログ

上記のリンクをクリックしてソースを表示するだけで必要なものはすべて書いてあります。 要点だけ説明すると、

String.prototype.escape = function()
{
 var str = this;
 str = str.replace(/&/g, "&");
 str = str.replace(/</g, "&lt;");
 str = str.replace(/>/g, "&gt;");
 str = str.replace(/"/g, "&quot;");
 str = str.replace(/'/g, "&#039;");
 str = str.replace(/\\/g, "&yen;");
 return str;
};

Number.prototype.pad = function()
{
 return (this < 10) ? '0' + this : this;
};

HTMLタグのエスケープをするescape関数と、桁を2桁にそろえるためのpad関数をprototypeに定義。 見易さを考えてprototypeにくくりだしただけなのでここは重要ではないです。

//consoleが定義されていない場合
if (typeof window.console != 'object')
{
 //画面末尾にログ表示用のdivを作成
 if (window.attachEvent)
 {
  window.attachEvent('onload', function(){
   var div = document.createElement('div');
   var attr1 = document.createAttribute("id");
   attr1.value = "console";
   div.setAttributeNode(attr1);
   
   var ul = document.createElement('ul');
   var attr2 = document.createAttribute("id");
   attr2.value = "console-list";
   ul.setAttributeNode(attr2);
   
   div.appendChild(ul);

   document.body.appendChild(div);
  });
 }

 //console.logを定義
 var console = {};
 console.log = function(obj){
  if (obj != null)
  {
   var list = document.getElementById('console-list');
   var d = new Date();
   var time = d.getHours().pad() + ':' + d.getMinutes().pad() + ':' + d.getSeconds().pad();
   
   list.innerHTML += '<li><span>' + time + '</span>' + obj.toString().escape() + '</li>';
  }
 };
}

consoleが定義されているか確認してから処理を行っています。 定義されていれば(Firebugがインストールされている環境ですね) なにも処理を行わないのでそのままFirebugのconsole.logが実行されます。 IEやOperaなどであれば(もちろんグローバルにconsoleという変数を定義していなければ) window.attachEventが実行されます。 window.attachEvent内ではログを表示するためのdivとulを生成してbodyにappendしています。 その後console.logの定義を定義し、呼び出されるとulのinnerHTMLにliを付け足していく処理を書いています。

#console {
 width: 90%;
 height: 10em;
}
#console ul {
 border: 1px solid #666666;
 background-color: #F0F0F0;
 font-family: "MS ゴシック", "Osaka-等幅";
 font-size: 12px;
 margin: 2px;
 padding: 3px;
 list-style-type: none;
 list-style-position: inside;
 width: 100%;
 height: 10em;
 overflow: auto;
}
#console ul li {
 margin: 0;
 padding: 0;
}
#console ul li span {
 padding: 0 1em 0 0;
 font-weight: bold;
}

divとulにはidが付いていて、CSSで見栄えを調整しています。

これでFirebugが実行できる環境ではそのままFirebugにログが出力され、 IEでは画面下部に表示されたエリアにログが表示されます。 本番環境でログを出力したくない場合はconsole.log = function(obj){};のようにして定義を空にしてしまい、 document.body.appendChildを呼び出さないようにすればログの表示エリアが表示されなくなります。

使いたいと思う人がいるかわかりませんが、ご自由に使っていただいて結構です。責任は負いませんー。

(WEB+DB PRESSでid:amachangが似たようなこと書いてたけどまぁいいや)

0 件のコメント: