Debugging Web Applications using Web Development Helper

Web Development Helper update (v0.8) and AJAX/Rich-Web application development goodies

I demonstrated some features of the latest version of my Web Development Helper during my PDC session. Version 0.8.1 is now published and available for download.

The tool is implemented as an Internet Explorer browser helper object. When installed, it provides a console window at the bottom on the IE window, and can be launched using the View | Explorer Bar, or Tools menu. This is a pet project that I work on during my spare time. It started as a tool scoped to ASP.NET scenarios, but has evolved into something that targets Web applications in general. A number of features described below are useful for those developing AJAX-style, rich Web applications.

HTTP Traffic Monitoring
This feature allows you to inspect all out-going HTTP and HTTPS requests from the current browser instance. It does not mess with your OS-level proxy settings, and is instead scoped to a single internet explorer process. As a result, it is more convenient to use, and does not show random HTTP requests that other applications might have issued in parallel.

As shown in the screenshot, the logs collect in the console window as they are captured, and can be double clicked to view more information which includes request and response headers, the out-going request body if there is one, and the received response content. It is a great way to see XMLHTTP requests, and corresponding response from the server whether it is XML or JSON, or other requests in the context of image pre-fetching and other scenarios. It is also a great way of debugging WebResource.axd requests if you are using this new ASP.NET 2.0 feature.

You can specify a subset of URL types to be logged to further reduce the noise by specifying a list of extensions to log via the Options dialog.

Script Errors and Immediate Window
This feature implements an in-process script debugger to handle script runtime errors and to log debug trace output.

As shown in the screenshot, runtime errors are caught, and the full call stack (script URL, line number, and actual line of code) is shown. You can choose to continue or abort the script (useful if you know continuing isn't going to help and you're going to get a series of errors). Alternatively you can choose to debug, in which case the tool's debugger will disconnect, and attempt to raise the error again that should cause Visual Studio's just-in-time debugger experience to trigger.

While the debugger is attached, it also handles any resulting debug trace your script may generate (using Debug.writeln in IE JavaScript, or debug.trace using the Atlas framework) and display that in the script console window.

Finally, the script window also has a window where you can type in some dynamic script, and have it execute in the context of the document. This allows you to inspect the current state of the document, script objects etc. You can even load and save frequently used scripts.

DOM Inspector
The DOM inspector allows you to view the live document tree being rendered by the browser. As such it is useful if you want to inspect dynamically generated content. The DOM inspector highlights the selected element, and allows you to view the HTML and CSS attributes for that element, or its markup representation.

The DOM inspector can display all elements in the document tree, or the selected elements, or elements matching a particular ID or CSS class.

In addition to all these features, the Web Development Helper preserves the ASP.NET specific features it started with. To use the ASP.NET features, you must install a corresponding HTTP module on your server, globally or per application as described in the associated readme. These features include a view state deserializer, trace information viewer, and other tools.

I hope you find the tool useful, and share your experiences, as well as take time to make suggestions for how it could be improved further. Specifically, I look forward to hearing from you what sort of capabilities would be helpful to have, both for client and server development of the next generation of Web applications. I have a list of features I'd like to build into the tool over time, but hearing from you on real scenarios would go a long way into prioritizing what gets done and in what form.

Posted on Monday, 9/19/2005 @ 5:33 PM | #Projects/Programming


Comments

14 comments have been posted.

Marc Brooks

Posted on 9/20/2005 @ 1:51 PM
Awesome tool, thanks! How do I get it to appear on the bottom of the window instead of on the left side?

Edgardo Rossetto

Posted on 9/20/2005 @ 10:17 PM
I'm having the exact same problem :)

Larry Port

Posted on 9/23/2005 @ 8:56 AM
Heard your Atlas talk at PDC, love the tool, have all of our page devs using it here. If I have a page with an iframe, how to I have the DOM inspector inspect the DOM of the IFrame?

Nikhil Kothari

Posted on 9/23/2005 @ 5:03 PM
Marc, Edgardo - the old version of the tool needs to be uninstalled first, before installing the new version. I have put out an updated version (v0.8.1.1) that will attempt to remove old registry entries, before adding current ones.

Larry - thanks. Currently the tool does not support framesets or iframes. The only way to debug the contents of a frame would be to navigate directly to it. (Yes, I know sometimes its not feasible - but its something you want to try and account for anyway, given someone may directly load a particular frame directly, and at the very least you want the page within the frame not to result in errors)

Vurg

Posted on 9/28/2005 @ 7:19 AM
I still can't get this thing to install at the bottom. I removed the previous version and installed this new one, and it still docks to the left. The problem now is there are two "Web Development Helper" items on my Explorer Bar list. One docks on the left, and the other just fills the whole client area with gray.

Edgardo Rossetto

Posted on 9/29/2005 @ 8:30 PM
Vurg, just uninstall any old version, and remove all the "Web Development Helper" references from the registry, reboot, reinstall.

Works like a charm.

Lidor P

Posted on 12/27/2005 @ 8:21 AM
Hi,
Regarding Larry's post about inspecting iframes/framesets and your response.
Are you planning to add support for iframes and framesets in future version if the WebDev Helper?
My team's web application is based on a frameset of 4 frames (which all of them hold iframes) and another "hidden frame" for global functions, all of which must interact inorder to work properly. Making a single page navigable independently would be quite difficult.
Extending the WebDevHelper to support frames would make the utility much more useful for us.
Thanks.

Can

Posted on 3/18/2006 @ 2:42 PM
Fantastic tool, thanks!

Jim

Posted on 6/16/2006 @ 3:26 PM
Big help, thanks!!

shakel

Posted on 8/9/2006 @ 9:56 AM
unable to isnstall in GAC sys unknown error, I have .net 2 installed on my pc with .net ver 1. Help me to install in GAC or how to add it in <httpModules> otherwise. thanks!

Souheil

Posted on 8/11/2006 @ 9:39 AM
Hi nikhil, Great tool as it appears and as described. I am running IE7 and the tool does not show at all. please advice what can be done. thank you.

gvspm

Posted on 8/17/2006 @ 7:56 AM
@Souheil: Are you sure you followed the instructions ? I am running IE7 beta 3 and teh tool shows up...

@nikhil: ...but i cannot enable Debuggine ( There was an error attaching the debugger to he script ).

anyone got it working with IE7 ?

gvspm

Posted on 9/9/2006 @ 4:29 AM
Got it working ( There was an error attaching the debugger to the script - when clicking on Enable Debugging ) :
it was a Java BHO, ssvhelper class.
I removed this registry key [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Browser Helper Objects\{761497BB-D6F0-462C-B6EB-D4DAF1D92D43}]

Dooby

Posted on 11/14/2006 @ 3:07 PM
Hi, tool seem great apart from I get the same error as gvspm. 'There was an error attaching the debugger to the script', when clicking on Enable Debugging. I have deleted the registry key suggested and restarted the browser but to no avail. Anyone got a suggestion? thanks.
The discussion on this post has been closed. Please use my contact form to provide comments.