マウスカーソル直下のXPathを見るbookmarklet

Opera bookmarklet

あるページのある要素の絶対ロケーションパスを知りたい時は結構ある。
そんな時、いちいちページソースから追っていたら埒が明かないので
何かいい方法はないかと探していた。


Firefoxなら
https://addons.mozilla.org/firefox/1095/とか
https://addons.mozilla.org/firefox/1192/とかが
あるけどOperaで使えそうなものは見つからなかった。


そこでbookmarkletとして作ってみた。
bookmarkletを実行するとページの上に細長いバーが出てくるので
適当にマウスカーソルを動かすとその直下にある要素の絶対ロケーションパスを表示する。


多少長い(669Bytes)のは我慢していただきたい。
また、はてなはbookmarkletのリンクを張れないので
ソースコードを直接貼るのも許していただきたい。


bookmarkletはこちら(コピーして使って下さい)

javascript:(function(){var l="";a=document.getElementsByTagName("*");
for(i=0;i<a.length;i++){if(a[i].tagName!="HTML"&&a[i].tagName!="!")
{a[i].addEventListener("mouseover",o,false);}}b=document.createElement('div');
with(b){style.fontSize='smaller';style.backgroundColor='infobackground';
style.position='fixed';style.top='0';style.left='0';style.margin='0';style.color='windowtext';
style.width='100%';style.borderBottom='2px solid';style.padding='2px';}
document.body.appendChild(b);function o(){y=x(this);if(l.indexOf(y,0)==-1)
{b.innerHTML=y;}l=y;}function x(obj){var p="";var n=obj;
do{p="/"+n.tagName+p;n=n.parentNode;}while(n!==document);return p;}})();


コーディングに以下の二つのJavaScriptをちょっとずつ参考にした。
http://tokyoenvious.xrea.jp/b/javascript/xpath_finder.html
slayeroffice | tools | Mouseover DOM Inspector v2.0 Help
というかバーの部分はXPath検索バーを丸パクｒ（ｒｙ

また、bookmarklet化には
Bookmarklet Crunchinator
を利用した。

みなさんに感謝。

2007.09.17追記

http://d.hatena.ne.jp/trickstar_os/20070403/1175623959
で id/class も表示できるように改良して頂きました。
気づくのが遅くなっちゃいましたが紹介させていただきます。