FirebugでJSON形式を見易くフォーマットするuserChrome.js
FirebugでDOMをtoSource()したときに生成されるJSON形式のようなものがかなり見えづらいので、それを読みやすくコンソールに表示するuserChrome.jsを作成した。
あくまで、見易く表示させることを目的としてたので、整形したものを使うという用途には向いてないかもしれません。
こっからダウンロード
例えばニコニコ動画のマイリストでmy.currentItemes[0].toSource() をやると下のようなものが表示されます。
整形されていないしUTF-8などが混ざっていて読みづらいです。
({item_type:0, item_id:"1237006406", description:"", item_data:{video_id:"sm6429247", title:"u3010u521Du97F3u30DFu30AFu3011Blunder girlu3010u30AAu30EAu30B8u30CAu30EBu66F2u3011", thumbnail_url:"http://tn-skr4.smilevideo.jp/smile?i=6429247", first_retrieve:1237006407, update_time:1245142420, view_counter:"1469", mylist_counter:"58", num_res:"38", group_type:"default", length_seconds:"112", deleted:"0", last_res_body:"u3053u306Eu4EBAu306Fu30D4u30B3u30D4u30B3u97F3u306E u51FAu3060u3057u304Cu661Fu9593u98DBu884Cu306Bu8074 sm7203573u306Bu3066u4F7Fu7528u3055. ", watch_id:"sm6429247"}, watch:0, create_time:1237007514, update_time:1254596442})
そこでこのuserChrome.jsを使って整形して表示させると、コンソールに次のような結果が返ってきます。
(object){ item_type (number): 0 item_id (string): 1237006406 description (string): item_data (object){ video_id (string): sm6429247 title (string): 【初音ミク】Blunder girl【オリジナル曲】 thumbnail_url (string): http://tn-skr4.smilevideo.jp/smile?i=6429247 first_retrieve (number): 1237006407 update_time (number): 1245142420 view_counter (string): 1469 mylist_counter (string): 58 num_res (string): 38 group_type (string): default length_seconds (string): 112 deleted (string): 0 last_res_body (string): この人はピコピコ音の 出だしが星間飛行に聴 sm7203573にて使用さ. watch_id (string): sm6429247 } watch (number): 0 create_time (number): 1237007514 update_time (number): 1254596442 }
整形後は何が何の要素なのかがわかりやすく表示されています。
さきほど、整形したものを再利用しにくいと書いたのは、その要素がstringであるなどの情報も含んでいるためです。
使い方
- FirebugのコマンドラインにJSON形式のものだけを入力する(コマンドラインに入力されているものをそのまま使います)
- 右下のJSONボタンを押す
- コンソールに結果が表示される。
整形するのにJSONDecoder.jsを使用させてもらっています。
JSONを見やすく展開してFirebugとかで表示 – JSONDecoder.js [ゼロと無限の間に] : http://0-oo.net/sbox/javascript/json-decoder
gist: 234552 – GitHub : http://gist.github.com/234552
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。