Web scratch

FirebugでDOMをtoSource()したときに生成されるJSON形式のようなものがかなり見えづらいので、それを読みやすくコンソールに表示するuserChrome.jsを作成した。
あくまで、見易く表示させることを目的としてたので、整形したものを使うという用途には向いてないかもしれません。

こっからダウンロード

• Firebug JSON formatting.uc.js

例えばニコニコ動画のマイリストでmy.currentItemes[0].toSource() をやると下のようなものが表示されます。
整形されていないしUTF-8などが混ざっていて読みづらいです。

({item_type:0, item_id:"1237006406", description:"", item_data:{video_id:"sm6429247", title:"\u3010\u521D\u97F3\u30DF\u30AF\u3011Blunder girl\u3010\u30AA\u30EA\u30B8\u30CA\u30EB\u66F2\u3011", 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:"\u3053\u306E\u4EBA\u306F\u30D4\u30B3\u30D4\u30B3\u97F3\u306E \u51FA\u3060\u3057\u304C\u661F\u9593\u98DB\u884C\u306B\u8074 sm7203573\u306B\u3066\u4F7F\u7528\u3055. ", 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であるなどの情報も含んでいるためです。

使い方

1. FirebugのコマンドラインにJSON形式のものだけを入力する(コマンドラインに入力されているものをそのまま使います)
2. 右下のJSONボタンを押す
3. コンソールに結果が表示される。

整形するのにJSONDecoder.jsを使用させてもらっています。

JSONを見やすく展開してFirebugとかで表示 – JSONDecoder.js [ゼロと無限の間に]

http://0-oo.net/sbox/javascript/json-decoder

gist: 234552 – GitHub

http://gist.github.com/234552

Related posts:

1. ニコニコ動画のマイリストページに埋め込まれている情報(DOM)
2. ニコニコ動画のAPIのメモのメモ
3. [拡張機能]ニコニコ動画の普段と違う見方ができる「SmileSmile」
4. [ニコニコ動画風]実況板のコメントと動画を同期表示できるソフトウェア一覧
5. Emacs(Meadow)の導入と設定方法のメモ