Others

[小ネタ]ガジェットで使えるDOMインスペクタっぽいツール

Windows Vistaのサイドバーに表示されるガジェットに対してDHTMLDiverが利用できたので解説します。

動作しているガジェット上で使えますので、ガジェットのデバッグや分析に便利です。

■実行例

1. ガジェット上で右クリックできる場所を探す。

   今回の場合は、テキストボックス内です。

   右クリックメニューから、DHTMLDiverをクリックして起動します。

   
2. DHTMLDiverが起動したら、[参照]ボタンをクリックしwindowオブジェクトを一覧する。

   window.locationが、"x-gadget:///currency.html"となっている点が特徴的ですね。

   
3. HTMLタグにあたるオブジェクト（window.document.getElementsByTagName("HTML")[0] ）を一覧する。

   outerHTMLで、ガジェットで使われているHTMLの全体像を把握できます。

   

4. [string]ボタンを押すと、outerHTMLの中身が表示されます。

   

DOMインスペクタっぽい機能の他に、任意のJavaScriptを実行できるexecScriptタブや、スタイル解析用のSTYLEDiverも動作しました。 これらは動作しているガジェット上でのデバッグに役立つと思いますので是非試してみてください。。

※注意点

DHTMLDiver3.3は、WinXP&IE6の組み合わせの頃に作ったツールなので、今回の紹介で利用したVISTA&IE7の組み合わせでは、ちょっと動かない機能があるようです。 対応できていない機能は動かないだけですので、そのうち時間ができれば対応したいと考えています。。