The times have changed; with the advent of newer technologies such as AJAX with its partial rendering, a more structured (OO) approach to JavaScript as well as more complicated web page layouts it has become more difficult to evaluate, debug and visualize the results of your development. That is way I have come to rely on some invaluable tools other than Visual Studio and notepad. Therefore, I will start my targeted ramblings with a series of articles profiling the tools on which I have come to depend. The first, and to me the most valuable, is Nikhil’s Web Development Helper. So how does it help?!
Consider the following debugging and development challenges:
-
JavaScript debugging with full call stack information
-
-
HTTP logging with JSON format display
-
JavaScript class browser
-
JavaScript Immediate Window
I will attempt to break the previous bullets down with hopefully some justice for the potential of this tool. This article focuses on how I use this tool but I challenge you to discover the full potential of Nikhil’s Web Development Helper and how it can take your web development to the next level of ease.
My favorite feature is the JavaScript debugging with full call stack information. How often have you encountered a JavaScript error only to see some non-descript display such as:
With Nikhil’s Web Development Helper you can transform this simple error notification into a more robust and directive error with the full call stack:
Although Visual Studio and especially Visual Studio 2008, with it's powerful JavaScript debugging capability, Nikhil’s Web Development Helper shows you the full call stack, script URL and line number that brought you to the unfortunate error. Such information will empower you with the knowledge to quickly and easily identify the exact location and cause of the error without heavy resource overhead.
You will, without my shame, indentify that I am a huge advocate of the ASP.Net Ajax client framework, formally Atlas. You will find (not to be deterred) many of my articles will be targeting examples of development on this framework. It is not to say that I am not open to other frameworks or techniques (and I am certainly welcome to your opinions) that push the envelope; but I believe in the long term that this will be the client framework that provides .Net developers the broadest features and greatest integration with the Visual Studio IDE, which we all have become familiar with and surely welcome such integration.
This brings us to our next feature: ASP.Net AJAX Sys.Debug output. To prevent writing a book, I won’t go into great detail about the usage of Sys.Debug but will direct you to read Roman Nikitin's excellent article about debugging with ASP.Net Ajax. Nikhil’s Web Developer Helper will display Sys.Debug information when you are in the Script layout.
If you do a lot of Ajax style development, as I do, it can sometimes be a challenge to debug or find issues with the request and response. Whether you are using the ASP.Net Update Panels or classes found in the Sys.Net namespace or simply using the XMLHttp object easily discovering what gets returned to the client can be daunting. Nikhil’s Web Development Helper can log all HTTP requests providing a glimpse of the request and response with a click of the mouse.
What’s great is that when the response is in JSON format or as a partial rendering it will format the response in an easy to read format. I will point out that all requests are logged so you can see every request made to the server.
Have you ever wanted to see what ASP.Net AJAX structured classes are loaded in the browser for a quick reference or to explore poorly documented classes? Nikhil’s Web Development Helper provides a great class browser which was based in part on Eilon Lipton's ASP.Net AJAX JavaScript Browser. It is very useful when you want to use a method but can’t remember the exact name, no need to sift through the source code and that is if you have the source.
The last feature that I want to profile is the JavaScript immediate window. You simply type any script and it will execute in the current context of the document just like using the immediate window in Visual Studio. It is wonderful for inspecting the current state of the document and JavaScript objects without having to embed random alerts and other antiquated techniques.
Yes all of these tools are wrapped up in one easy to use IE toolbar. I have only highlighted the features that I find to be most beneficial. Jump on over to Nikhil’s projects site and see what other features the Web Development Helper contains, you will be glad you did. Oh and it’s free!! Thanks Nikhil!
The next article in this series will profile another IE toolbar which all web developers should be able to find very useful.