Hatena::ブログ(Diary)

bobchinの日記 このページをアンテナに追加 RSSフィード

2005年03月04日(金)

[]Javascript Javascriptを含むブックマーク

http://eto.com/d/0503.html#JavaScript_Programming

Javascriptプログラミングについて

http://homepage1.nifty.com/kuraman/js/debug.html

デバッグツール。

ちょこっと手直しを入れてみた。

// ****************************** debug.js
// original from http://homepage1.nifty.com/kuraman/js/debug.html
// modified by Kouichirou Eto
// modified by Kazunobu Ichihashi
// print(variable): variableの内容を出力バッファに保存
// flush(): 出力バッファの内容をデバッグウィンドウに出力
// clear(): 出力バッファの内容をクリア
// setDebug(true | false): デバッグ情報を出力する(true)か出力しない(false)かを設定
// inspect(obj): オブジェクトの内容をわかりやすい文字列にする
// p(obj): inspectした結果を表示する

var debug = new debug();

function debug() {
  // プロパティ ////////////////////////////////////////////////////
  this.html = "";     // 出力するデバッグ情報のバッファ
  this.hWin = null;   // デバッグ情報を表示するウィンドウのハンドル
  this.bDebug = true; // デバッグするかどうかのフラグ

  this.color = "";

  // メソッド //////////////////////////////////////////////////////
  
  /**
   * デバッグを出力するかどうか
   *
   * @param flag boolean true:デバッグする | false:デバッグしない
   */
  this.setDebug = function(flag) {
    this.bDebug = flag;
  }

  /**
   * デバッグ情報の出力バッファをクリアする
   */
  this.clear = function() {
    this.html = "";
    this.flush();
  }

  /**
   * デバッグ情報をデバッグウィンドウに出力する
   */
  this.flush = function() {
    if (false == this.bDebug) return;
    if (null == this.hWin || this.hWin.closed) {
      this.hWin = window.open("", "debug",
        "height=200,width=400,menubar=yes,scrollbars=yes,resizable=yes");
    }
    this.hWin.document.open("text/html", "replace");
    this.hWin.document.write(this.html);
    this.hWin.document.close();
    this.hWin.focus();
  }

  /**
   * デバッグ情報をバッファに追加する
   *
   * @param html string デバッグする変数
   */
  this.print = function(html) {
  	this.color = (this.color == "#FAF5D4") ? "#EBCC67" : "#FAF5D4";
    this.html += ("<div style='background-color:"+this.color+"'>" + this.htmlchar(html) + "</div>\n");
  }

  /**
   * オブジェクトの内容を文字列にする
   *
   * @param obj オブジェクト
   */
  this.inspect = function(obj) {

    if (typeof obj == "number") {
      // 数値の場合
      return ""+obj;

    } else if (typeof obj == "string") {
      // 文字列の場合
      return "\""+obj+"\"";

    } else if (typeof obj == "function") {
      // 関数の場合
      return ""+obj;

    } else if (typeof obj == "object") {
      // オブジェクトの場合
      var str = this.to_s(obj, "");
      return "{"+str+"}";
    } else {
      // 上記以外の場合
      return "<"+(typeof obj)+":"+obj+">";
    }
  }

	/**
	 * オブジェクトの内容を文字列にする
	 *
	 * @param obj オブジェクト
	 */
  this.to_s = function(obj, indent){
    var delimiter = ", \n"; // 区切り文字

	  var str = "";
	  for (key in obj) {
	  	// 区切り文字
		  if (str != "") str += delimiter;
	  	str += indent;

	    var value = obj[key];
	    if (!value) {
	    	// キーがあるが値がない場合
	      str += ""+key+"=>undefined";
	      continue;
	    }
	    
			if (typeof value == "number") {
			  // 数値の場合( key=>value )
			  str += ""+key+"=>"+value+"";

			} else if (typeof value == "string") {
			  // 文字列の場合( key=>"value" )
			  str += ""+key+'=>"'+value+'"';

			} else if (typeof value == "function") {
			  // 関数の場合( key() )
			  str += ""+key+"()";

			} else if (typeof value == "object") {
			  // オブジェクトの場合( key=>value )
			  value = "\n" + this.to_s(value, indent+"  ");
			  str += ""+key+"=>"+value+"";

			} else {
			  // 上記以外の場合( key=><type:value> )
		  	  str += ""+key+"=><"+(typeof value)+":"+value+">";
			}
	  }
	  if (str == ""){
	  	// オブジェクトにプロパティがない場合はそのまま表示
	    str += ""+obj;
	  }
	  return str;
  }

  this.htmlchar = function(str){
  	// 順番が重要!
  	str = str.replace(/&/g, "&amp;");
  	str = str.replace(/</g, "&lt;");
  	str = str.replace(/>/g, "&gt;");
  	str = str.replace(/\"/g, "&quot;");
  	str = str.replace(/\n/g, "<br>\n");
  	return str;
  }

  /**
   * オブジェクトの内容を文字列にして表示する
   *
   * @param elem object オブジェクト
   */
  this.p = function(elem) {
    this.print(this.inspect(elem));
    this.flush();
  }
}

ゆうすけゆうすけ 2005/03/23 05:48 エラー: too much recursion
ソースファイル: debug.js
行: 132

のエラーが発生しました。FireFoxです。
form オブジェクトを渡したときです。

this.to_s = function(obj, indent){
(中略)
} else if (typeof value == ”object”) {
// オブジェクトの場合( key=>value )
value = ”¥n” + this.to_s(value, indent+”  ”);
str += ””+key+”=>”+value+””;

無限ループ(入れ子)になってしまうんですね。
再入回数制限とか入れたほうが安全かもしれません。

bobchinbobchin 2005/03/23 16:26 ご指摘ありがとうございます。Operaだと大丈夫だったみたいですが、IEでもループしてました。最大表示階層を指定するように変更しました。以下にアップしてあります。
http://bobchin.ddo.jp/wiki/index.php?Javascript/%A5%C7%A5%D0%A5%C3%A5%B0

teruSharlandteruSharland 2006/05/07 20:32 今、Ajax/JavaScriptに関する書籍用の記事を書いてるんですけどbobchinさんが改良されたdebug.jsを紹介させてもらってかまわないでしょうか。
その際、Bobchin’s Wiki-Javascript/デバッグ_ JavascriptでデバッグをしやすくするのURL
http://bobchin.ddo.jp/wiki/index.php?Javascript/%A5%C7%A5%D0%A5%C3%A5%B0
を紹介させていただきたいと思っています。

トラックバック - http://d.hatena.ne.jp/bobchin/20050304