忍者ブログ
[PR]
×

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



2017/10/19 14:18 |
JavaScript prettyPrintでvar_dump()
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()のことは秘密だぞ。
PR


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

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<Dojo1.6.1 dojo Dojox.chartingでテーマの一部だけを変更する | HOME | 買ったものリスト 2011/08/21>>
忍者ブログ[PR]