DOM Inspector: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
No edit summary
Line 1: Line 1:
==What is the DOMi?==
The '''[http://www.mozilla.org/projects/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.
The [http://www.mozilla.org/projects/inspector/ DOM Inspector] is a Mozilla tool used to inspect, browse, and edit the [[Development resources#DOM|Document Object Model]] of XML documents - usually web pages or [[Development resources#XUL|XUL]] windows.


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 still applies to DOMi in Firefox and other programs.
==Available documentation==
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 still applies to DOMi in Firefox and other programs.


Mozilla.org's [http://www.mozilla.org/projects/inspector/faq.html 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].
Mozilla.org's [http://www.mozilla.org/projects/inspector/faq.html 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].
Line 8: Line 8:
==Getting the DOMi==
==Getting the DOMi==
===Firefox===
===Firefox===
The DOMi is included in [[Firefox]] builds [http://forums.mozillazine.org/viewtopic.php?t=34545 since Nov'03], but it is an option in the Windows installer (you must choose ''Custom'' installation and select DOM Inspector in Additional components window).
The DOMi is included in Firefox builds [http://forums.mozillazine.org/viewtopic.php?t=34545 since Nov'03], but it is an option in the Windows installer (you must choose ''Custom'' installation and select ''DOM Inspector'' in ''Additional components'' window).


===Thunderbird===
===Thunderbird===
DOMi was an installer option in [[Thunderbird]] builds since the end of March 2004, and in the 0.6 release, but was removed from installer for the 0.8 release "to keep download size small". There's no official XPI for Thunderbird yet as of Sept'04 ([https://bugzilla.mozilla.org/show_bug.cgi?id=254031 bug 254031]).
DOMi was an installer option in Thunderbird builds since the end of March 2004, and in the 0.6 release, but 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'05 ([https://bugzilla.mozilla.org/show_bug.cgi?id=254031 bug 254031]).


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:
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|profile]].
* 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|profile]].
* As it was packaged some time ago, its [[Install.rdf|install manifest]] doesn't allow it to be installed in recent Thunderbird versions. To work around it, open the downloaded XPI file (it's a zip archive) and edit <tt>install.rdf</tt>, replacing <code>&lt;em:maxVersion&gt;0.8&lt;/em:maxVersion&gt;</code> with <code>&lt;em:maxVersion&gt;1.0&lt;/em:maxVersion&gt;</code>.
* As it was packaged some time ago, its [[Install.rdf|install manifest]] doesn't allow it to be installed in recent Thunderbird versions. To work around it, open the downloaded XPI file (it's a zip archive) and edit <tt>install.rdf</tt>, replacing <code><em:maxVersion>0.8</em:maxVersion></code> with <code><em:maxVersion>1.0</em:maxVersion></code>.


===Mozilla Suite===
===Mozilla Suite===
Line 21: Line 21:


===Nvu===
===Nvu===
There is an [[Nvu]] version of the DOMi [http://glazman.org/nvu/releases/extensions/ here].
There is an Nvu version of the DOMi [http://glazman.org/nvu/releases/extensions/ here].
 


===Related extensions===
===Related extensions===
Additionally, the [http://www.projectit.com/freestuff.html 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.
Additionally, the [http://www.projectit.com/freestuff.html 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.


==Using the DOMi==
==Using the DOMi==
The [http://www.brownhen.com/DI.html#use Using the DOM Inspector] section in the ''"Introduction to the DOM Inspector"'' explains what you can do once you get the DOMi.
The [http://www.brownhen.com/DI.html#use 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 [[Dev : Themes|theme]] and [[Dev : Extensions|extension]] developers, as it allows you to view various properties associated with any XUL element.  
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 select 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
* See what properties and methods of given element you can call from your JavaScript
 
''This section is a stub.''


==Issues with the DOMi==
==Issues with the DOMi==

Revision as of 21:25, 5 May 2005

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", 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 Nov'03, but it is an option in the Windows installer (you must choose Custom installation and select DOM Inspector in 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 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'05 (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.
  • As it was packaged some time ago, its install manifest doesn't allow it to be installed in recent Thunderbird versions. To work around it, open the downloaded XPI file (it's a zip archive) and edit install.rdf, replacing <em:maxVersion>0.8</em:maxVersion> with <em:maxVersion>1.0</em:maxVersion>.

Mozilla Suite

The DOM Inspector is available in Complete Mozilla Suite installations or by selecting the Inspector component in a Custom setup type.

Nvu

There is an Nvu version of the DOMi here.

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.

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.