FirefinderはJavaScriptプログラマ以外も使うべき

Firebug tips

Firefinderとは何か？

https://addons.mozilla.org/en-US/firefox/addon/11905/
CSSセレクタやXPathで要素を検索出来るFirebugの拡張です。

どんな人にお勧めか？

hiddenフィールドの値を閲覧したり、
formのどの要素のnameが何かとかさくっと見たくなることないですか？
あるならお勧めです。

Firebugには既に$$というCSSセレクタで要素を検索出来る関数があるんだが？

CSSセレクタのサポートの度合いが違います。
$$関数では基本的なCSSセレクタしかサポートされていないので、
例えば、ここなら、http://images.google.co.jp/advanced_image_search?hl=ja

$$('input');
// [input, input ja, input Google 検索, input, input, input, input#rimgtype1, input#rimgtype2 news, input#rimgtype3 face, input#rimgtype4 photo, input#rimgtype5 clipart, input#rimgtype6 lineart, input, input, input, input#nof off, input#modf images, input#sf active, input y]
// このようなタグ名でのおおざっぱな絞り込みや

$$('#rimgtype1');
// [input#rimgtype1]
// idやclassが振られた要素について、それにぴったり合致するものを取得するくらいしかできません。


Firefinderならより複雑なCSSセレクタが使用出来ます。
例えば…
name属性前方一致

[name^=as_]


後方一致

[name$=_permission]


selectボックスの選択されたoption

:selected

改良してほしいところとか

  • 検索したCSSセレクタの履歴を上下キーで辿れるようにしてほしい
    • 何度か画面遷移した後でまた同じform要素のvalueを見たくなることがとても頻繁にあるので
  • 検索結果からHTMLタブに遷移出来るようにしてほしい
    • CSSセレクタで検索して、DOMツリー上の該当箇所を見てみたいということはままある