snippets from shinichitomita’s journal

■[json][javascript]JavaScriptオブジェクトを視覚的にデバッグする

以前JSONサービスからオブジェクトを取得して表示するテストツールを作ったのだけど、表示部分の実装を少々作り直してまとめました。

debugobj.js

使い方：

var obj = { a : "hello", b : "javascript", c : [ [ "c11", "c12" ], "c2" ] };

のようなJavaScriptのオブジェクトに対して

var dbgobj = new DebuggableObject(obj);
dbgobj.render(document.getElementById('debugOutput'));

としてやると、オブジェクトの各プロパティを階層的にHTMLテーブルでデバッグ表示します。

デモ：

http://www.geocities.jp/stormriders999/jsdebug.html

これを使って書き直したJSONサービステスト。

http://www.geocities.jp/stormriders999/jsontest.html

現在、Yahoo(USのみ), del.icio.us, Amazon(XSLTで対応), GoogleのJSONサービスをサンプルとして含めています。もちろんこれに限らず任意のJSONサービスをテストできますが、テストできるのはJSONP形式の呼び出しに対応したもののみです。

（追記）

うん、なんかもう似たようなのあったみたい。あとはビジュアルの問題ってことで。

http://nazo.yi.org/nazonojs/?name=objectdump

ツイートする

Permalink | コメント(1) | トラックバック(0) | 18:06