The DHTML DOM Browser is a programming tool which allows a programmer to get a glimpse inside of the browser while it is rendering a page. A web programmer can see how various DOM property values interact with one another and can actually change those values in the running page.
Even with the advent of web standards, individual browser authors make implementation decisions that impact web page authors. DOM elements have implementation specific properties that allow a web page author to take advantage of features above and beyond those specified in the standards. The DOM Browser exposes many of those properties and allows the web programmer to investigate their use.
The DOM Browser sits outside of the page being browsed and therefore does not impact the performance of the code running in that page. As a result, you can always run your pages under the DHTML DOM Browser while you are developing.
The DHTML DOM Browser is a DHTML application comprised of HTML and image files. In order for it to be allowed to have access to the DOM of your pages, it must be loaded from the same domain from which your pages are loaded (see Installation). Furthermore, the DOM Browser must actually start the window in which your page will load.
When you load DOMBrowser.html into your browser, it starts
by browsing its own window. At the top of the page, you see a field
called "Address:" which contains the URL of the DOM Browser itself.
The "Address:" field is where you will enter the URL of the page you wish to browse. Keep in mind that the URL you enter must be in the same domain as the addess currently in the field.
Below the address field is the client window size selector.
Choose a window size for the client to be set to. This is a convenient way to set the client size to see how it might appear on a particular screen resolution.
Below the client window size selector is the button bar. This contains buttons which control the operation of the DOM Browser.
Build tree causes the DOM Browser to construct an expandable tree representing
the DOM of the currently loaded URL.
Show window browses the properties of the window object. This is
here mainly as a convenience. Internet Explorer exposes the window
object through document.parentWindow.
Help brings up this help page.
After the button bar comes the tree view. The tree view is comprised of a list of all frames in the application by both name and src, a list of id attributes within a given frame, and the expandable tree view itself.
The list of id's is filled with id's occurring in the currently selected frame which is initially the top frame. Selecting a new frame either by name or src causes the list of id's to be filled with a list of id's for the newly selected frame. Selecting an id causes the tree view to expand to show the DOM node with the id selected.
Clicking on a
causes the tree view to
expand to show the immediate child nodes of the selected node. Clicking on a
causes the tree view to collapse all
of the child nodes for the selected node.
Clicking on a node such as <HTML> causes a new window to be displayed which shows all of the properties for that node.
The DOM Browser Properties browser displays the property name, approximately 40 characters of the string representation of the property's current value, and the type of the property's current value.
Property names may be rendered in one of three ways:
Clicking on a property whose value is an object causes a new window to be created which displays the properties for that object. Clicking on a property whose value can be changed causes a property editor to be launched in a new window.
There are several types of property editors which are specific to the type of value being edited.
The DHTML DOM Browser requires a web browser which follows the current web standards. It has been developed and tested with Microsoft Internet Explorer version 5 and Netscape version 5 (a.k.a. Mozilla Seamonkey)
The DHTML DOM Browser must be installed so that it loads from the same domain as the pages to be browsed. This is a hard security restriction imposed by the browsers and cannot be overcome.
Before installing the DHTML DOM Browser, you need to determine where the code for the pages you are developing lives. If you will just load the pages from the local file system ("File/Open File..."), then you can install the DOM Browser on your local machine.
If, however, you plan to load pages from a web server such as Apache or IBM WebSphere, you need to install the DOM Browser in a shared directory on the web server.
The DOM Browser must be installed on the same drive as the pages to be
browsed. If, for instance, your pages live in
E:\Work\WebPages then the DOM Browser must be installed in a
directory somewhere on your E: drive.
When you unzip DOMBrowser.zip, it creates a directory
\DOMBrowser under the current directory. To install under a
directory E:\Tools, change to that directory and unzip
DOMBrowser.zip. DOM Browser will be installed in
E:\Tools\DOMBrowser.
To start DOM Browser, you can load DOMBrowser.html from your
web browser by using "File/Open File..." and specifying
E:\Tools\DOMBrowser\DOMBrowser.html or you can enter
a file URL as file:///E|/Tools/DOMBrowser/DOMBrowser.html.
WARNING: Installing DOM Browser on a web server makes it available to all visitors to your site. DOM Browser allows users to see values of internal JavaScript variables. These may include passwords or other sensitive information.
The DOM Browser must be installed so that it loads from the same domain as the pages to be browsed. Generally, this means that the DOM Browser must be installed somewhere under the published web directories.
On Apache Web Server,
this is usually anywhere under the htdocs directory. If
Apache is installed in E:\Apache Group\Apache then the
htdocs directory is usually
E:\Apache Group\Apache\htdocs.
When you unzip DOMBrowser.zip, it creates a directory
\DOMBrowser under the current directory. To install under a
directory E:\Apache Group\Apache\htdocs, change to that
directory and unzip DOMBrowser.zip. DOM Browser will be
installed in E:\Apache Group\Apache\htdocs\DOMBrowser.
To start DOM Browser, you can load DOMBrowser.html from your
web server by using specifying the address of your web server followed
by /DOMBrowser/DOMBrowser.html. For instance, if your
web server is called myserver.myco.com, you would specify
the URL as http://myserver.myco.com/DOMBrowser/DOMBrowser.html.
The DOM Browser can currently only browse the DOM of a single window. If your application opens multiple windows, there are currently no provisions to be able to browse the DOM of those windows as well.
If your main window stores references to those secondary windows, though, you can walk those references and see DOM nodes in the secondary windows as well.
Microsoft references: