This script exposes the browser's DOM (Document Object Model) Tree for easy exploration and editting, giving the developer a peek at the data structure as the web browser has interpreted it.
To open the DOM Browser, Click on this link
The DOM is the internal data structure that a web browser uses to store the web page. DHTML is the process of using javascript to manipulate that tree. Each web browser uses a different tree structure to store the details of the page. This script is written to allow you to explore that tree, and modify the values.
Also allows the developer to explore the Event object as sent to functions when events occur. This gives you a look at the properties and values available to your event handling functions.
To open the Event Browser, Click on this link
To debug your webpage, simply place this code in the head section :
<script id="jsDebugger" language="JavaScript" src="http://www.bitesizeinc.net/demo/jsDebugger/jsDebugger.js"></script>
Two functions are provided for you to display the debugger. The first is jsDebuggerDisplay() which will open the Browser DOM Explorer and Javascript Console. To open these automatically, use this code :
<body onLoad="jsDebuggerDisplay()">The second function is to explore event objects, which are passed to event handling functions. If you would like to explore the details of a particular event, use jsDebuggerEventHandler(). For example :
<img src=img/button.jpg onClick="jsDebuggerEventHandler()">
The Error window will automatically be displayed when an error is detected.
You can download the source code for this program at the HTML Debugger Project Page