朝顔日記

DOM Inspector の使い方の例

publish

2006-10-12T15:50:54+09:00

tags

firefox
tool

はてぶ

以前、Session Manager の Undo close tab をマウスジェスチャでという記事を書いたのですが、それに関連して掲示板にて、Mouse Gesturesをまだお使いなら教えてください。というコメントを頂きました。たしかに DOM Inspector は便利なのですが、なかなか使い方がよくわからないツールでもあります。ということで、ブックマークサイドバーを開くコマンドは一体何かというお題で、実際に DOM Inspector を操作して、toggleSidebar('viewBookmarksSidebar'); というコードを得るまでを、Wink という画面キャプチャを動画にして解説するソフトを使って、Flash ムービーにしてみました。

なお、使用した Firefox は、10月3日版のナイトリーな Bon Echo です。trunk の DOM Inspector は微妙に違っていますので、ちょっと注意が必要です。

Dom Inspector でブックマークサイドバーを開くコマンドを見つける

他にも DOM Inspector には色々な使い方がありますが、Firefox を究める256のテクニックなどにも解説がありますのでよろしくどうぞ。と軽くアサマシっておく。:p)

「DOM Inspector の使い方の例」へコメントをつける

この記事へのツッコミ

1: あ (2006-10-13T01:46:53+09:00): 本筋からははずれますが、
ツリーのインデントを減らしているせいだと思うんですが、
[+] とか [-] のマークの位置がずれてしまっていますね。
@-moz-document url(chrome://inspector/content/viewers/dom/dom.xul) {
treechildren::-moz-tree-indentation {width: 12px !important;}
treechildren::-moz-tree-twisty {padding-right: 1px !important;}
}
としてみてはどうでしょうか。

ちなみに自分はさらにインデントを減らして
@-moz-document url(chrome://inspector/content/viewers/dom/dom.xul) {
treechildren::-moz-tree-indentation {width: 9px !important;}
treechildren::-moz-tree-twisty {padding-right: 0px !important;}
treechildren::-moz-tree-cell-text(colNodeName) {margin-left: 1px !important;}
}
ってしてます。
2: のり (2006-10-13T02:21:35+09:00): おお、ずれているのにすら気がついていませんでした。:p)
私もさらにインデントを減らしたバージョンに入れ替えました。ありがとうございます。
動画のほうは作り直すのは大変なので、そのままということで。:p)
3: おっじゃ (2006-10-13T09:32:06+09:00): ありがとうございますm(_ _)m
DOM Inspector の使い方が少しだけ分かりました（汗
ツール→オプションを Gesture 登録出来ました(^^ゞ
あさんのインデントを減らしたバージョンとstriped も Stylish に入れさせて頂きました(^^;

トラックバック

1: あの不定記/DOM Inspector のインデントを減らす (2006-10-14T00:56:30+09:00): 朝顔日記 -DOM Inspector の使い方の例を見ていたら、DOM Inspectorのツリーのインデントを減らすのは、やっぱり需要がありそうなので書いておきます。DOM Inspectorで階層の深いところへ入っていくと、どんどん右