DOM Inspector: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(moving domi content here from Dev : Theme Development)
 
mNo edit summary
 
(48 intermediate revisions by 22 users not shown)
Line 1: Line 1:
==The DOM Inspector==
The '''[https://developer.mozilla.org/en/DOM_Inspector DOM Inspector]''' is a Mozilla tool used to inspect, browse, and edit the [[Development resources#DOM|Document Object Model]] of documents - usually web pages or [[Development resources#XUL|XUL]] windows.


===What is the DOMI?===
==Available documentation==
The [http://www.mozilla.org/projects/inspector/ DOM Inspector] is a Mozilla tool used to inspect, browse, and edit the Document Object Model [http://www.w3.org/DOM/][http://www.mozilla.org/docs/dom/domref/dom_intro.html#997525] of web documents and XUL[http://www.xulplanet.com/tutorials/whyxul.html] interfaces[http://www.mozilla.org/xpfe/xptoolkit/xulintro.html].
The article [https://developer.mozilla.org/en/DOM_Inspector/Introduction_to_DOM_Inspector ''"Introduction to the DOM Inspector"''] provides a basic overview of the DOMi. It's a good place to orient yourself with the DOMi and learn how to use its features. The article has some Mozilla Suite-specific references, but most of the information still applies to DOMi in Firefox and other programs.
The article "[http://www.brownhen.com/DI.html Introduction to the DOM Inspector]," by Ian Oeschger, provides a basic overview of the DOMI. It's a good place to orient yourself with the DOMI and learn how to use its features. The article has some Mozilla Suite-specific references, but most of the information can still be applied to using the DOMI in Firefox and other programs.<br>
Mozilla.org's [http://www.mozilla.org/projects/inspector/faq.html DOM Inspector FAQ] has some additional info.<br>
The ''Creating Applications with Mozilla'' book hosted at mozdev.org also has a [http://books.mozdev.org/html/mozilla-app-b-sect-3.html section about the DOMI].


===Getting the DOMI===
Mozilla.org's [https://developer.mozilla.org/en/DOM_Inspector/DOM_Inspector_FAQ DOM Inspector FAQ] has some additional information. The ''"Creating Applications with Mozilla"'' book hosted at mozdev.org also has a [http://books.mozdev.org/html/mozilla-app-b-sect-3.html section about the DOMi].
The DOMI is included in recent Firefox builds [http://forums.mozillazine.org/viewtopic.php?t=34545], but is an option in the Windows installer. It is not currently available in Thunderbird, but a Mozillazine forums thread has some info about [http://forums.mozillazine.org/viewtopic.php?t=23933 building Thunderbird with the DOMI].


The [http://skypilot.projectit.com/extensions/inspectorwidget20030621.xpi Inspector Widget extension] adds an '''Inspect''' toolbar button and the menu option '''Tools > Web Development > DOM Inspector'''Selecting an element after clicking the Inspect button will launch the DOMI and inspect the element.
==Getting the DOMi==
===Firefox===
''' Firefox 2 and earlier:''' The DOMi is included in builds [http://forums.mozillazine.org/viewtopic.php?t=34545 since November 2003], as an option in the Windows installerYou must choose the "Custom" installation and select "DOM Inspector" in the "Choose Optional Components" window (see [[Installing Firefox on Windows]] for details).  In at least some versions of Linux—Ubuntu for one—the DOMi is a separate package.


===Using the DOMI===
'''Starting in Firefox 3:'''  The DOM Inspector is no longer included with Firefox but it is [https://addons.mozilla.org/firefox/addon/dom-inspector-6622/ available as an extension].
The [http://www.brownhen.com/DI.html#use Using the DOM Inspector] section in "Introduction to the DOM Inspector" explains what you can do once you get the DOMI. As a theme developer, the DOMI will allow you to view the various properties associated with any XUL element.
===Thunderbird===
DOMi was an installer option in Thunderbird builds since the end of March 2004 and in the 0.6 release, but it was removed from installer for the 0.8 release to keep download size small. It is now available as an extension—make sure you choose the right extension for your platform. ([https://bugzilla.mozilla.org/show_bug.cgi?id=254031 See bug 254031 for progress on an “official” extension].)
 
* [https://addons.mozilla.org/thunderbird/addon/dom-inspector-6622/ DOM Inspector for Thunderbird 3.0]
* [https://addons.mozilla.org/thunderbird/addon/dom-inspector/ DOM Inspector for Thunderbird 2.0]
* [https://addons.mozilla.org/thunderbird/addon/dom-inspector/versions/1.8 DOM Inspector for Thunderbird 1.5]
 
The bottom of the web page has a link to older releases of the extension.
 
===Mozilla Suite and SeaMonkey===
The DOM Inspector is available in the "Complete" Mozilla Suite and SeaMonkey installation or by selecting the Inspector component in a "Custom" installation.
 
===Nvu===
[http://glazman.org/nvu/releases/extensions/ There is an Nvu version of the DOMi].
 
===Related Extensions===
Additionally, the [https://addons.mozilla.org/firefox/addon/inspectorwidget/ Inspector Widget extension] adds an "Inspect" toolbar button and the menu option "Tools -> Web Development -> DOM Inspector".  Selecting an element after clicking the Inspect button will launch the DOMi and inspect the element.
 
If you wish to use XPath for DOM tree navigation, or query the document by XPaths and RegExp in the DOMi you may find useful the [https://addons.mozilla.org/firefox/addon/xpather/ XPather] extension ([http://xpath.alephzarro.com XPather Homepage]).
 
[https://groups.google.com/forum/#!topic/mozilla.dev.extensions/OObTuMJUBls/ Element Capture] adds a Capture button to the DOMi window to take a screenshot of a selected element.
 
For more related extensions, search for [https://addons.mozilla.org/search/?q=Dom+Inspector DOM Inspector] on Mozilla Add-ons site.
 
==Using the DOMi==
The DOM Inspector is very handy tool for [[Dev : Themes|theme]] and [[Extension development|extension]] developers, as it allows you to view various properties associated with any XUL element.  
* Browse the tree structure of interface elements
* Browse the tree structure of interface elements
* View an element's Box Model properties like border and padding  
* View an element's Box Model properties like border and padding  
* Find element names, IDs, and classes to target elements in CSS
* Find element names, IDs, and classes to select elements in CSS
* Find out what files (CSS, images) are used to style an element
* Find out what files (CSS, images) are used to style an element
* See what properties and methods of given element you can call from your JavaScript
''This section is a stub.''
==Issues with the DOMi==
''Warning!''  Changing themes while using the DOMi may cause the program to crash.
'''NOTE''' There is a problem with the Inspector if "Show Whitespace Nodes" is not selected - > the "Blink Selected Element" option is turned off when the Inspector is opened.  It does not store the preferences...  There is a bug (307255) and a proposed "fix" at this location:
[http://bonsaibugs.org/ http://bonsaibugs.org/]
It seems to address the old Inspector that came as an extension, so no work around for now (?).
==External Links==
* [http://forums.mozillazine.org/viewtopic.php?f=39&t=3037659 Is Dom Inspector Plus Working in My TB Version?]


===Issues with the DOMI===
[[Category:Development]]
'''''Warning!'''''  Changing themes while using the DOMI can cause the program to crash.

Latest revision as of 13:25, 25 March 2018

The DOM Inspector is a Mozilla tool used to inspect, browse, and edit the Document Object Model of documents - usually web pages or XUL windows.

Available documentation

The article "Introduction to the DOM Inspector" provides a basic overview of the DOMi. It's a good place to orient yourself with the DOMi and learn how to use its features. The article has some Mozilla Suite-specific references, but most of the information still applies to DOMi in Firefox and other programs.

Mozilla.org's DOM Inspector FAQ has some additional information. The "Creating Applications with Mozilla" book hosted at mozdev.org also has a section about the DOMi.

Getting the DOMi

Firefox

Firefox 2 and earlier: The DOMi is included in builds since November 2003, as an option in the Windows installer. You must choose the "Custom" installation and select "DOM Inspector" in the "Choose Optional Components" window (see Installing Firefox on Windows for details). In at least some versions of Linux—Ubuntu for one—the DOMi is a separate package.

Starting in Firefox 3: The DOM Inspector is no longer included with Firefox but it is available as an extension.

Thunderbird

DOMi was an installer option in Thunderbird builds since the end of March 2004 and in the 0.6 release, but it was removed from installer for the 0.8 release to keep download size small. It is now available as an extension—make sure you choose the right extension for your platform. (See bug 254031 for progress on an “official” extension.)

The bottom of the web page has a link to older releases of the extension.

Mozilla Suite and SeaMonkey

The DOM Inspector is available in the "Complete" Mozilla Suite and SeaMonkey installation or by selecting the Inspector component in a "Custom" installation.

Nvu

There is an Nvu version of the DOMi.

Related Extensions

Additionally, the Inspector Widget extension adds an "Inspect" toolbar button and the menu option "Tools -> Web Development -> DOM Inspector". Selecting an element after clicking the Inspect button will launch the DOMi and inspect the element.

If you wish to use XPath for DOM tree navigation, or query the document by XPaths and RegExp in the DOMi you may find useful the XPather extension (XPather Homepage).

Element Capture adds a Capture button to the DOMi window to take a screenshot of a selected element.

For more related extensions, search for DOM Inspector on Mozilla Add-ons site.

Using the DOMi

The DOM Inspector is very handy tool for theme and extension developers, as it allows you to view various properties associated with any XUL element.

  • Browse the tree structure of interface elements
  • View an element's Box Model properties like border and padding
  • Find element names, IDs, and classes to select elements in CSS
  • Find out what files (CSS, images) are used to style an element
  • See what properties and methods of given element you can call from your JavaScript

This section is a stub.

Issues with the DOMi

Warning! Changing themes while using the DOMi may cause the program to crash.

NOTE There is a problem with the Inspector if "Show Whitespace Nodes" is not selected - > the "Blink Selected Element" option is turned off when the Inspector is opened. It does not store the preferences... There is a bug (307255) and a proposed "fix" at this location:

http://bonsaibugs.org/

It seems to address the old Inspector that came as an extension, so no work around for now (?).

External Links