prettyPrint.jsを試してみた。

Javascript prettyPrint

懇意のmezawa氏がMOONGIFTの記事を送ってくれた。
タイトルは『Javascriptのvar_dump「prettyPrint.js」』。

とても魅力的な名前だ。
自分もPHPを良く使うので、かねがね、「Javascriptにvar_dumpがあればなぁ」などと思っていたのだが、そのものずばりを作ってくれた人がいる模様。素晴らしい！！

スクリプトはgithubに上がっていて、ダウンロードできる（こちら）。

ダウンロードすると、サンプルが付属しているし、サイトに説明があるので、わざわざテストする必要もないのだろうが、簡単に試してみた。

以下が、ソースコード。
prettyPrint.jsを読み込んで、オブジェクトを渡してあげさえすれはいい。
戻り値は、Table形式のHTMLDivElementなので、戻り値を表示するDivを容易しておく。
ダンプするオブジェクトでは、配列やオブジェクトを入れ子にしてみた。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>prettyprint Sample</TITLE>
<style type="text/css"> 
</style>

<script type="text/javascript" src="scripts/lib/prettyprint.js" >
</script> 

<script type="text/javascript">//<![CDATA[
/*
 * prettyPrintのサンプル
 */
var test = {
		_arr 	: ["pretty","print"],
		_rear	: [["pretty","print"]],
		_reobj	: {	"a":"pretty",
					"b":{"b1" : "print"}},
		_func 	: function(_str){
			alert(_str);
			return;
		}
};


// PrettyPrintでダンプ
// prettyPrint(obj)はHTMLDivElementとして戻る。
function prettyPrintTest() {
		document.getElementById('debug').appendChild(prettyPrint(test));
	}

// ]]>
</script>
</HEAD>

<BODY onload="prettyPrintTest()">
	<!-- prettyPrint.jsレンダリング用 -->
	<div id="debug" style="width:450px;"></div>
</BODY>
</HTML>


結果は以下の画面。
うーーん。素晴らしい。