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での支援を募集しています。
