現在の位置
DOM inspectorとは 編集
DOM Inspectorとは、XMLドキュメントおよびHTMLドキュメントを解析するツールです。userContent.cssやuserChrome.cssを弄ったりする場合などに特に有用です。
インストール方法 編集
Firefox 3 Beta 4 以降、DOM Inspector は単体の拡張機能として Firefox Add-ons で配布されています。
- Firefox 3.0a1-3.6a1pre対応 DOM Inspector
- Fiefox 2.0.0対応 DOM Inspector
- Firefox 1.5.0.3 対応 Domi(adt for Fx1.5.0.+.xp)
- firefox1.0用のDOMi
使いかた 編集
ツール -> DOMインスペクタ から起動できます。
ウェブページの情報を調べる 編集
DOM Inspectorを起動すると現在閲覧中のウェブページのタグがツリー構造で表示され、調べることができます。ノードを選択すると、ウェブページの該当する部分が赤く点滅します。
- GUIで調べる
ツールバーの左のボタン、あるいはメニューからSearch→Select Element By Clickを選んでから、ウェブページ上の調べたいところをクリックすると該当するツリーのタグ名にジャンプします。
- タグ名などで検索
ツールバーの右のボタンを押すか、メニューからSearch→Find Nodesで検索します。
Firefoxの外観について調べる 編集
FirefoxのUIの外観はCSSで記述されています。
- DOMインスペクタを開いて File -> Inspect a Window -> (サイト名 - )Mozilla Firefox を選択します。
- URLバー(?)に chrome://browser/content/browser.xul と出るので、その横にある、inspect ボタンを押します。
- 左側のDocumentペインでnodeを選ぶと、Browserペインで対応する部分が赤く点滅します。
- nodeName id class がCSSで言うところの HTML タグ id class に対応しているので変えたいところを選ぶ (殆どは navigator-toolbox browser FindToolbar status-bar の下位にある……筈)
- あとはuserChrome.cssに書けばO.K.
ちなみにOptionsはブラウザとは別の窓が開くから下記のようにすれば良いです。
- 予めDOMインスペクタを開いておく
- Opitonを開き，DOMインスペクタをアクティブにする
- 上記手順1で (サイト名 - )Mozilla Firefox の代わりに Options を選択
- 以下同様
コンテキストメニュー内の変更したい部分のセレクタ(ID等)の調べ方(Fx3.6 DOM Inspector2.0.4の場合)
- DOM Inspectorを起動→File→inspect chrome documentからブラウザのタイトルを選択。
- Search→Find Nodes→Attrを選択。
- Attrに「label」、Valueに見つけたいメニューの表示名（「更新」など）を入力。
- 右ペインのid欄に表示されている文字列が対象のID。
他のものもヒットするかもしれないがコンテキストメニューの項目は
#document→window→popupset→idがcontentAreaContextMenuのpopup→xjl:arrowscrollbox→xul:scrollbox→xul:box
にあるのでそこで区別する。