In the beta days of .NET 2.0, I saw Nikhil Kothari’s Web Development Helper. It’s an IE AddIn that displays a ton of extra information about a webpage. I didn’t install it because it (1) was developed with .NET 2.0 (something I wasn’t going to put on my primary machine because it was beta) and (2) I wasn’t working on any .NET 2.0 projects so there was nothing to show. Today, in the post-Thanksgiving dead time at work, I finally took a second to check it out… what I’ve seen as blown me away.
While it requires .NET 2.0 (recently updated to work with the RTM) to run, it is still helpful for even non .NET 2.0 or non ASP.NET (like PHP/JSP/HTM) pages! All you’ll get is a DOM viewer (which is pretty damn powerful), script debugger (with the call stack!), and some HTTP logging info (ala Fiddler). If you go through the rest of the installation (installing an assembly to the GAC & registering another assembly), you’ll get so much more with your locally developed ASP.NET pages including a parsed ViewState browser (see a SS of this here), and so much more.
I can’t stress this one point enough: while you don’t get all the debug information if you’re running a non-ASP.NET 2.0 page, you get enough. I know my designer friends will be quite pumped when they install and check out the DOM viewer. Remember, all you need is the .NET 2.0 redistributable installer and to follow the instructions in the Web Development Helper readme (PDF included in the binary download from the project site linked above).
I can’t wait until I’m working on my next web project to use this even more!
Special note to you MCMS 2002 developers: I tried using this on one of my MCMS project… I can’t tell you how nice it would have been to have this utility when I was working on some of my more complex custom placeholders.
I’ve included a few screen shots (click to see full image) of what it looks like when I loaded my site’s homepage below. There are even more screenshots on Nikhil’s site.
Notice the highlight around my name in this screenshot… that’s the DIV I clicked on in the DOM browser!
Notice when I clicked on the STYLE node in the tree on the left, the contents of that tag are shown to the right!