MozillaZine

DOM Inspector

From MozillaZine Knowledge Base

(Difference between revisions)
Revision as of 17:32, 10 March 2006
Unarmed (Talk | contribs)
(spam off)
<-- Previous diff
Revision as of 20:48, 12 April 2006
Asqueella (Talk | contribs)
(Thunderbird)
Next diff -->
Line 14: Line 14:
Chris Neale kindly made an [http://www.devlib.org/mozdev/cdn/insptb.xpi XPI package for Thunderbird] ([http://forums.mozillazine.org/viewtopic.php?t=106356 discussion thread]). Note that since it contains binary components for different OSes, Thunderbird may complain about SO/DLL/DYLIB files at startup. Just delete the files it complains about from your [[profile folder]]. Chris Neale kindly made an [http://www.devlib.org/mozdev/cdn/insptb.xpi XPI package for Thunderbird] ([http://forums.mozillazine.org/viewtopic.php?t=106356 discussion thread]). Note that since it contains binary components for different OSes, Thunderbird may complain about SO/DLL/DYLIB files at startup. Just delete the files it complains about from your [[profile folder]].
 +
 +[http://forums.mozillazine.org/viewtopic.php?t=403364 DOMi for Thunderbird 1.5 Linux]
===Mozilla Suite=== ===Mozilla Suite===

Revision as of 20:48, 12 April 2006

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.

Contents

Available documentation

The article "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 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

The DOMi is included in Firefox builds since November 2003, but it is an option in the Windows installer. You must choose the "Custom" installation and select "DOM Inspector" in the "Additional components" window.

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. There's no official XPI for Thunderbird yet as of May 2005. (See bug 254031.)

Chris Neale kindly made an XPI package for Thunderbird (discussion thread). Note that since it contains binary components for different OSes, Thunderbird may complain about SO/DLL/DYLIB files at startup. Just delete the files it complains about from your profile folder.

DOMi for Thunderbird 1.5 Linux

Mozilla Suite

The DOM Inspector is available in the "Complete" Mozilla Suite 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)

Using the DOMi

The Using the DOM Inspector section in the "Introduction to the DOM Inspector" explains what you can do once you get 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 (?).