Beginning ASP.NET 4.5 in CSharp and VB Opsylum

710 x CHAPTER 18 EXCEPTION HANDLING, DEBUGGING, AND TRACING
FIGURE 18-20
3. Press F5 to start debugging. The page loads in the browser and you get a text box and two buttons.
Enter your name in the text box and click the Say Hello button. As soon as you click it, focus is put
back on Visual Studio, and the code halts in the JavaScript code block.
COMMON MISTAKES If your client-side JavaScript breakpoint doesn’t get hit,
close your browser to stop debugging, type the word debugger before the line
you set the breakpoint on, and press F5 again. VS does not always correctly
debug your client-side JavaScript breakpoints, but it works fi ne when using the
debugger keyword:
debugger
var yourName = document.getElementById('YourName').value;
NameService.HelloWorld(yourName, helloWorldCallback);
4. Press F10 to execute the highlighted line (you need to press it
twice if you’re using the debugger keyword). The value in the
text box is now assigned to the yourName variable. When you
hover your mouse over that variable, a data tip appears.
5. Open the other debugging windows and notice how they
all behave identically to what you saw before. You can add
JavaScript variables to the Watch window to look at their values,
enter JavaScript in the Immediate window for evaluation, and so
on. Also note that the Solution Explorer has changed, showing the
active client-side files containing script right above the web project
(see Figure 18-21).
6. To look inside these documents, you can double-click them under
the Windows Internet Explorer node that has appeared in the
Solution Explorer. The file WebServices.aspx should already
FIGURE 18-21
be open in the Document Window. At first, the file may look like
before. But if you look closely, you can see that this is no longer the original source file with ASP.
NET controls mixed up with other markup, but the final HTML rendered in the browser.
To warn you that you are looking at the final file, and not the original source, VS has added the
text [dynamic] and a lock icon to the tab for the file above the Document Window, shown in
Figure 18-22.