JavaScript prettyPrintでvar_dump()

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 14:35 |

alert(hoge)すると[object Object]って言われてどういうことだよとなりますが、var_dump()みたいに配列やオブジェクトの中身を出力してくれるライブラリがないかと探してみたらprettyPrint.jsというものがみつかりました。
https://github.com/jamespadolsey/prettyPrint.js

変数とDOMに対して使ってみます。
なお、変数の例はこちらのをそのまま借りています。

<html>
<head>
    <script src="prettyprint.js"></script>
</head>
<body>
	<div id="hoge" title="title">text<span>inner</span></div>
	<div id="output"></div>
	<div id="output2"></div>

	<script type="text/javascript">
		var hoge =document.getElementById('hoge');
		document.getElementById('output').appendChild(prettyPrint(hoge));
		
		var config = {
			expanded :true,
			forceObject: true,
			maxDepth: 2,
			styles: {
				'default': {
					th: {
						backgroundImage:false
					}
				}
			}
		};
		var test = {
			_arr 	: ["pretty","print"],
			_rear	: [["pretty","print"]],
			_reobj	: {	"a":"pretty",
					"b":{"b1" : "print"}},
			_func 	: function(_str){
				alert(_str);
				return;
			}
		};
		
		document.getElementById('output2').appendChild(prettyPrint(test, config));
		
	</script>
</body>
</html>

出力は以下。

DOMElement
tag	<div>
id	hoge
innerHTML	text<span>inner</span>

				Object

key

				value

				_arr

				
								Array(2)
						
								index
							
								value
						
								0
							
								"pretty"
						
								1
							
								"print"

				_rear

				
								Array(1)
						
								index
							
								value
						
								0
							
								[DEPTH REACHED] [+]

				_reobj

				
								Object
						
								key
							
								value
						
								a
							
								"pretty"
						
								b
							
								[DEPTH REACHED] [+]

				_func

				
								Function
						
								arguments
							
								_str
						
								body
							
								alert(_str); return;

prettyってわりにソースはちょっとあれなかんじですが、見事に出力できました。
なお、[DEPTH REACHED]ってなってるところは本来ならクリックすると更に詳細を表示することが出来ます。

さて、prettyPrintの解説記事を見て回ったのですがオプションについて書いてる記事がついぞひとつも見つかりませんでした。
第二引数を渡すことで挙動の変更が可能です。

forceObjectは返り値を強制的にObjectにするみたいなんですが意味がよくわかりませんでした。

expandedはfalseにすると詳細を表示しません。
maxDepthで内部構造を掘り下げる深度を調整できます。
いずれも初期状態では隠れているだけで、各値をクリックすることで詳細を見ることができます。

stylesは出力されるテーブルのスタイルを変更することができます。
例でやってるbackgroundImageは、デフォルトだといちいちインライン画像を作ってしまうためキャンセルさせています。

まあ、所詮開発時にしか使わないはずなのであんまりオプションを指定してもしょうがないんですがね。
ちなみにconsole.dir()のことは秘密だぞ。

2011/08/22 21:24 | Comments(0) | TrackBack() | JavaScript