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:
- Writes the name of the function to the page into the currently active element
- Executes the function with the passed in arguments and context
- 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.