The Web Development Helper

Another interesting tool that’s not tied to Visual Studio is the Web Development Helper, a free tool
created by Nikhil Kothari from the ASP.NET team. The central goal of the Web Development Helper
is to improve the debugging experience for ASP.NET developers by enhancing the ability of the
browser to participate in the debugging process. The Web Development Helper provides a few useful
features:
• It can report whether a page is in debug or tracing mode.
• It can display the view state information for a page.
• It can display the trace information for a page (and hide it from the page, making sure your
layout isn’t cluttered).
• It can clear the cache or trigger an application restart.
• It can enable and disable script debugging (a feature you’ll use in Chapter 31).
• It allows you to browse the HTML DOM (document object model)—in other words, the tree
of elements that make up the rendered HTML of the page.
• It can maintain a log of HTML requests, which information about what page was requested,
how long it took to receive it, and how large the HTML document was.

The design of the Web Development Helper is quite interesting. Essentially, it’s built out of
two pieces:
• An HTTP module that runs on the web server and makes additional information available to
the client browser. (You’ll learn about HTTP modules in Chapter 5.)
• An unmanaged browser plug-in that communicates with the HTTP module and displays the
important information in a side panel in the browser (see Figure 2-33). The browser plug-in is
designed exclusively for Internet Explorer, but at least one other developer has already created
a Firefox version that works with the same HTTP module.

To download the Web Development Helper, surf to http://projects.nikhilk.net/Projects/
WebDevHelper.aspx. There you can download a setup program that installs two DLLs. One is
a .NET assembly that provides the HTTP module (nStuff.WebDevHelper.Server.dll). The other is
the browser plug-in (WebDevHelper.dll). The setup program copies both files to the c:\Program
Files\nStuff\Web Development Helper directory, and it registers the browser plug-in with Internet
Explorer. When the setup is finished, it gives you the option to open a PDF document that has a short
but detailed overview of all the features of the Web Development Helper.
When you want to use this tool with a web application, you need to add a reference to the
nStuff.WebDevHelper.Server.dll assembly. You also need to modify the web.config file so it loads
the HTTP module, as shown here:
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<httpModules>
<add name="DevInfo" type="nStuff.WebDevHelper.Server.DevInfoModule,
nStuff.WebDevHelper.Server, Version=0.5.0.0, Culture=neutral,
PublicKeyToken=8fc0e3af5abcb6c4" />
</httpModules>
...
</system.web>
...
</configuration>

Now, run one of the pages from this application. To actually switch on the browser plug-in, you
need to choose Tools ➤ Web Development Helper from the Internet Explorer menu. When you click
this icon, a pane will appear at the bottom of the browser window. At the top of the pane are a series
of drop-down menus with a variety of options for examining ASP.NET pages. You’ll see one example
that uses the Web Developer Helper in Chapter 3.

 

 

 

注意：IE8中已经换了位置：View ->  Explorer Bars -> Web Development Helper