Hatena::ブログ(Diary)

放浪するエンジニアの覚え書き このページをアンテナに追加 RSSフィード

2009-06-24

prettyPrint.jsを試してみた。

| 18:50 |  prettyPrint.jsを試してみた。のブックマークコメント

懇意の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>

結果は以下の画面。

うーーん。素晴らしい。

f:id:tetsuya_odaka:20090624184905p:image