DOM Inspector: Difference between revisions
m (Top header is unnecessary; article title serves that job) |
(DOMi and TB) |
||
Line 6: | Line 6: | ||
Mozilla.org's [http://www.mozilla.org/projects/inspector/faq.html DOM Inspector FAQ] has some additional info. 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 info. 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 | ===Getting the DOMi=== | ||
The | The DOMi is included in recent Firefox builds [http://forums.mozillazine.org/viewtopic.php?t=34545], but is an option in the Windows installer. | ||
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 | It was an installer option in Thunderbird builds since the end of March 2004, and in the 0.6 release, but was removed from the installer for 0.8 release. There's no official XPI package for TB yet as of Sept'04 ''(is there a bug?)'', but Chris Neale kindly packaged it as an [http://downloads.mozdev.org/cdn/insptb.xpi XPI 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. | ||
The DOM Inspector is available in ''Complete'' Mozilla Suite installations or by selecting the Inspector component in a ''Custom'' setup type. | |||
Additionally, 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. | |||
===Using the DOMI=== | ===Using the DOMI=== |
Revision as of 16:24, 23 September 2004
What is the DOMI?
The DOM Inspector is a Mozilla tool used to inspect, browse, and edit the Document Object Model [1][2] of web documents and XUL[3] interfaces[4].
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 can still be applied to using the DOMI in Firefox and other programs.
Mozilla.org's DOM Inspector FAQ has some additional info. The Creating Applications with Mozilla book hosted at mozdev.org also has a section about the DOMI.
Getting the DOMi
The DOMi is included in recent Firefox builds [5], but is an option in the Windows installer.
It was an installer option in Thunderbird builds since the end of March 2004, and in the 0.6 release, but was removed from the installer for 0.8 release. There's no official XPI package for TB yet as of Sept'04 (is there a bug?), but Chris Neale kindly packaged it as an XPI 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.
The DOM Inspector is available in Complete Mozilla Suite installations or by selecting the Inspector component in a Custom setup type.
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 "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.
- 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 target elements in CSS
- Find out what files (CSS, images) are used to style an element
Issues with the DOMI
Warning! Changing themes while using the DOMI can cause the program to crash.