Appendix B. Development Tools- P2 B.3. The DOM Inspector The DOM Inspector tool, which is now installed by default in the Mozilla browser and accessible from Tools > Web Development, displays the document object mode of any document or part of the interface and allows you to update that DOM dynamically by changing attribute values, rearranging the structured content, or deleting nodes. The DOM Inspector reads the DOM of the requested window or document into memory, where you can manipulate it. However, the DOM Inspector does not persist your changes back out to the file from which that DOM was originally loaded. If you use JavaScript in the interface or to manipulate web pages, then you will recognize what a powerful tool it can be particularly given how hard it can be to see the interface's object model clearly and figure out which nodes in the DOM correspond to which parts of the displayed interface. The DOM Inspector also allows you to inspect local files and URLs. To open a file for inspection in the DOM Inspector, choose either File > Inspect a Window or Inspect a URL . . . and enter the URL of the web document you want to inspect in the dialog. When the DOM Inspector loads a document, it displays the DOM (as shown in Figure B-1 of that document) as a tree structure on the lefthand side and the individual nodes with their attributes and other information on the righthand side. Figure B-1. The DOM inspector interface As you click on the nodes in the tree in the left panel, the DOM Inspector highlights the nodes that are part of the visible interface by pointing them out with a blinking red border. You can peck through the tree in the DOM Inspector and find all parts of the interface. The DOM Inspector also displays any anonymous content that is part of the window. See Chapter 7 for information about anonymous content and the way it relates to the DOM. The anonymous content nodes that are bound to the window you specify become part of the DOM that the Inspector reads and can be analyzed and manipulated like any other node. The pull-down widgets to the left of the pane headers let you select which portions of the DOM are displayed in the panels. By default, the DOM nodes are displayed, as shown in Figure B-1, but you can also display the associated stylesheets, the JavaScript objects, the XBL bindings, the document's box model, and other information. B.4. The Component Viewer The Component Viewer is a Mozilla application that displays all components and interfaces available to the XPCOM developer on the Mozilla platform. It is not installed by default in the Mozilla browser, like the DOM Inspector, but you can get binary installations that have it or you can build it from mozilla/extensios/cview if you use CVS. Discovering components and interfaces is actually one of the trickier aspects of developing applications with Mozilla, so this tool can help you when you are at the initial stages of your application development and want to see which XPCOM components and interfaces are available. As shown in Figure B-2, the Component Viewer interface, like the DOM Inspector, has two main panels. The left side shows all components in Mozilla and the right side shows all interfaces. Figure B-2. An interface displayed in the Component Viewer In XPCOM, a single component can implement more than one interface. Thus, for example, the editor shell component (@mozilla.org/editor/editorshell;1) implements nsIURIContentListener, nsIEditorShell, nsIEditorSpellCheck, and others. If you open the interfaces, you will see the various methods those interfaces define. You can also right-click in the component viewer and access a context menu that lets you look up the selected item in LXR, which is the web-based source viewer for Mozilla. B.5. Venkman: The JavaScript Debugger Venkman is both a graphical and a console debugger. It is one of the most sophisticated examples of a Mozilla application and an indispensable tool for the many developing applications and web pages that rely on JavaScript. Like the DOM Inspector, you can access the JavaScript Debugger from the Tools > Web Development menu (if it was selected during the Mozilla install process). Figure B-3 shows Venkman in action. Figure B-3. The JavaScript Debugger [...]... DTDs, string bundles, HTML, and RDF files B.7 Missing Parts The tools highlighted so far are just some of the pieces needed to form a fullfeatured Mozilla development environment Currently, several different areas of the application creation process would benefit greatly from a dedicated development tool Some of the different types of needed tools are listed below B.7 .1 Visual XUL Editors XUL is a simple... project (http://jslib.mozdev.org), which is trying to create a repository of versatile functions that any Mozilla application can reuse For a project like this to work, however, it needs to be widely available and accepted by the developer community To ensure its wide availability, these common libraries and toolkits need to become a core part of the standard Mozilla development tools B.7 .3 Integrating... B.7 .3 Integrating the Pieces Popular development environments like Microsoft's Visual Studio bring together a cohesive set of tools; they provide the tool framework in which much of the setup, code generation, directory structure, linking, and other drudgery is handled automatically When used together, the tools described in this appendix can make your application development process easier However,... their own development projects So far, there have been at least a couple of attempts to create such a tool A few projects, such as Vixen (http://www.mozilla.org/projects/vixen/) and XULMaker (http://xulmaker.mozdev.org), have started to create a visual XUL editor So far, however, there isn't a tool that allows someone to quickly create a user interface without creating XUL and CSS code by hand B.7 .2 Toolkits... However, currently, all of these tools are located in different places and none of them interact with one another to provide a seamless development framework Even when all the tools do become available, it will be necessary to integrate each of these together to create a single development environment for Mozilla application builders This single tool will allow you to create the shell of an application easily... this example, we clear by breakpoint number, which we got from the break command in the previous step 16 Type cont The cont command continues execution The context menu should pop up as it always does B.6 MozillaTranslator Chapter 11 provides information about how to make a Mozilla application usable in many different languages Localizing an application can be simple if your application is small For . Appendix B. Development Tools- P2 B. 3. The DOM Inspector The DOM Inspector tool, which is now installed by default in the Mozilla browser and. to debug browser chrome. Debugging JavaScript components is another example of when scripts must be loaded before the debugger is initialized. Because