AJAX In Action [282]
target.style.border='4px solid blue'
will outline that element with a thick blue border.
Figure A.11 The Mozilla DOM Inspector presents a structural view of the DOM behind a web page, including nodes declared in the HTML and those generated programmatically. Licensed to jonathan zheng 584 APPENDIX A The Ajax craftsperson’s toolkit Figure A.12 The Mozilla DOM Inspector allows direct scripting access to elements in the DOM. The variable name target refers to the currently selected DOM node, in this case the image of the planet, whose border we have just altered. The DOM Inspector also has a third pane, below the other two, into which the visible content of a document can be rendered (figure A.13). If the user types a page address into the URL bar and clicks on the Inspect button, this pane will appear, allowing the abstract DOM and the visible document to be examined side by side. A.4.2 DOM inspectors for Internet Explorer As with all the Mozilla-based toolkits, a major drawback is that the inspectors can’t be used to inspect problems that occur only in Internet Explorer. Several DOM inspectors with similar functionality are available for Internet Explorer. Many are commercial or shareware, but some workable free versions also exist, such as the IEDocMon utility (see the Resources section for URLs). Like the Mozilla DOM Inspector, IEDocMon provides a simple two-pane view of the DOM, with a tree on the left and node details on the right (figure A.13). That concludes our discussions of specific types of development tools. One very active source of Ajax tools is the community that has sprung up around the Firefox browser’s extensions capabilities. In the following section, we’ll briefly outline how to find and install Firefox extensions. Licensed to jonathan zheng Installing Firefox extensions 585 Figure A.13 The IEDocMon toolbar for Internet Explorer provides functionality similar to the Firefox DOM Inspector, allowing for rapid resolution of rendering issues with programmatically generated user interfaces. A.4.3 The Safari DOM Inspector for Mac OS X The Mac OS X browser Safari has a built-in DOM inspector too. This is available from the debug menu. The debug menu is not enabled by default. To enable it, open the Terminal application and type in the following: defaults write com.apple.Safari IncludeDebugMenu 1 Depending on your privileges, you may need to sudo this command. Once it has executed, restart Safari and the debug menu should appear. A.5 Installing Firefox extensions We’ve already looked at two very useful Firefox extensions, the Venkman debugger and the LiveHTTPHeaders network debugger. There are many extensions available for Firefox, and several are designed for use by web developers. In this Licensed to jonathan zheng 586 APPENDIX A The Ajax craftsperson’s toolkit Figure A.14 The Firefox browser lists all installed extensions in a pop-up dialog. More extensions can be installed from the Web. section, we’ll walk briefly through the process of installing a Firefox plug-in, using the Modify Headers extension as an example. Firefox extensions are installed from the web browser itself. Initially, you need to locate the download page for the extension; in this case it’s found at https:// addons.mozilla.org/extensions. The Mozilla add-ons site can also be launched from the browser by clicking the Tools > Extensions menu and then selecting the Get More Extensions link in the pop-up dialog. Figure A.14 shows Firefox pointing at the Mozilla Update site page for the Modify Headers extension. In this case, the hyperlink we need is the large Install Now button. We click on it, and a dialog appears, warning us of the dangers of installing unsigned extensions (figure