Beginning ASP.NET 4.5 in CSharp and VB Opsylum

712 x CHAPTER 18 EXCEPTION HANDLING, DEBUGGING, AND TRACING
make it easy to set breakpoints, VS doesn’t restrict you to adding them in pages at design time only;
instead, it also enables you to set them in the dynamic runtime files. When you stop debugging, VS
tracks the new breakpoints for you, finds out to what source file they belong, and adds them there again
for you, so they are available for the next debugging session.
Although you may not realize it because everything is taking place on the same computer and in the
same IDE, you are crossing many boundaries when debugging like this. First, VS enables you to debug
client-side script in the browser, so you can hook into that even before any data is sent to the server.
When you press F5 in step 8, the code continues and sends the value to the server where it was used in
the HelloWorld method of the NameService class. Once that server-side web method is done, execution
returns to the client again, enabling you to break on the alert statement that shows the message
from the web service.
For some reason, debugging client-side JavaScript in VS 2012 doesn’t always work. If you’re encountering
issues, remember the debugger keyword. Just add it before the line you want to break on and VS
will halt execution when it encounters this keyword. Don’t forget to remove the debugger keyword
again if you’re done with debugging; otherwise, your browser will try to start a script debugger when it
encounters this keyword, which is meaningless to most of your users.
So far you’ve been looking at debugging code. However, VS now has great support to diagnose the
HTML of your page as well. You see how this works next.
DEBUGGING WITH THE PAGE INSPECTOR
If you want to build a site that is easy to maintain, you probably make use of many of the features
that ASP.NET and the browser offers. For example, you’re probably using a master page for the
general layout, you store page-specific content in a content page that uses that master page, you may
have one or more user controls for content you reuse across your site (such as the Contact Form in
the Planet Wrox website), and you may be using themes and skins to separate the design from the
rest of your application.
In the browser, all of this code comes together as a single HTML source document that in turn
includes references to external resources such as JavaScript and CSS files and images. Because it’s a
single file, it can be hard to debug that code and understand where a certain piece of HTML came
from. In addition, because multiple CSS selectors can influence the layout of your page, it may be
hard to track down the file in which a certain piece of CSS is defined. Using the Page Inspector, new
to VS 2012, this now becomes much easier.
Introducing the Page Inspector
The Page Inspector is a diagnostics tool that runs inside Visual Studio and that brings a unified
experience between your browser, the ASP.NET run time, and your source files. The Page Inspector
comes with Visual Studio so you don’t need to do anything to make use of it.
Although an upcoming exercise shows you many of the features that the Page Inspector offers, here’s
a quick description of how you can use it: