On the left side you can see a basic HTML document. On the right side is a panel (a div with position: absolute) which shows you the whole DOM tree. By clicking on a node you can dig into the tree.
If you take a look at the script, you will that basically I first draw the body-object and every time an element gets clicked I draw the sub elements.
For the next example I’m going to stick with the diagnostics theme that I set forth with the DOM walking example. I will modify the functions that are in my script (at runtime) and plugin a call to a logging method before I call a function. That way I can log a stack trace and use this to do diagnostics on a running application without having to set breakpoints manually. You find it here: Function Hooks
In this sample I’m using the fact that any function is just an object. I store a reference to the function and then replace it with a function that:
1. Writes the name of the function to the page into the currently active element
2. Executes the function with the passed in arguments and context
3. Closes the active element and makes the previous element active again
Again, the core of this script is just about 20 lines, but it’s essentially a live call stack view.