Opera developer toolsがヤバい - mallowlabsの備忘録

今まではJavaScriptでいじった後のDOM Treeを見るときに
Kazuho@Cybozu Labs: Ajax な HTML ページのソースコードを表示する
を使わせてもらってたんだけど
http://dev.opera.com/articles/view/opera-developer-tools/
のDOM Snapshotを使ってみたらヤバかった。
いじった後のDOM Treeを色分け＆整形してくれて非常に見やすいし
前者と違ってHEADタグ等も表示してくれる。

こんな感じ↓

本当は使うときOperaのツールバーに追加して使うんだけど、
中身はただのBookmarkletなので以下のJavaScriptをお気に入りに追加するだけで使える。
#はてなダイアリはBookmarkletのリンクを作れないから困る
試すだけならコピーしてそのままアドレスバーに貼り付けて移動してもOK。

DOM Snapshot Bookmarklet

javascript:(function(){var ele=document.getElementsByTagName('head')[0].appendChild(document.createElement('script')); ele.type='text/javascript';ele.src='http://devfiles.myopera.com/articles/59/liveSource.js';ele.parentNode.removeChild(ele);liveSource.open();})();

BookmarkletなのでFirefoxとかでも使えます(笑)
ただしFirefoxだとインデントが上手くいかない模様。

Bookmarkletと言えば
誰か dp.SyntaxHighlighterとJSDecoder使って
JavaScript版の色分け＆整形Bookmarklet作らないかなぁ。
非常に欲しい。

2006/12/05 追記

色分け＆整形ツールがあった。
JavaScriptのコード整形＆色付け(貼り付け用)
ただ、JSDecoderの色分けがあんまり賢くない。