Visual Studio Hacks [Electronic resources] نسخه متنی

Hack 39. Debug Scripting Code

Visual Studio isn't just a
great IDE, it's a great debugger for all sorts of
Windows programming tasks. You can even use it to debug VBScript or
JavaScript as it runs inside your web browser.

I spent a lot of time writing web
applications without the benefit of Visual Studio. Before ASP.NET, I
would usually use a web tool like HomeSite to write web applications.
When ASP.NET came out and I started using Visual Studio, I got very
spoiled using the debugging capability of Visual Studio for my
ASP.NET code, but I always wished I could do the same for JavaScript
or VBScript. Thankfully, Visual Studio provides this exact
functionality. This hack details how you can set up Visual Studio to
debug
VBScript and JavaScript while it runs in
your browser.

The first thing you have to do to enable debug scripting is to enable
script debugging in Internet Explorer 6:

Open Internet Explorer.

Navigate to Tools Internet Options.

Select the Advanced tab, which is shown in Figure 5-18.

Uncheck the box titled "Disable script debugging
(Internet Explorer)".

Figure 5-18. Internet Options dialogAdvanced tab

After this checkbox is unchecked, script debugging will be enabled in
Internet Explorer.

It is important to understand that when debugging script code, you are debugging the actual code run by the browser, not your ASP.NET server-side code. When debugging script code, you will be looking at the code the same as you would if you used View Source in the browser.

Once script debugging has been enabled, you can start debugging a
script in a number of different ways. The first option is two menu
items that are available in Internet Explorer under the View
Script Debugger menu. From this menu, you can choose Open
and you will then be able to jump into the debugger and place
breakpoints in your document. The second option is Break at Next
Statement, which will cause Internet Explorer to break into the
debugger whenever the next piece of script is run.

You can also debug from inside Visual Studio. Open your Web Project
in Visual Studio and start the debugger. (You can start the debugger
using the Play button, which will launch a new browser, or you can
attach to an already existing Internet Explorer instance
[Hack #41] .) Once the
debugger is started, you need to access the
Running Documents window. This can be
done through the Debug Windows Running
Documents or by using the shortcut key Ctrl-Alt-N
(Debug.RunningDocuments).

The Running Documents window shows a list of all the currently
running web documentsusually this contains only a single
document. (In the case of frames or iframes, more than one document
can show up here.) The Running Documents window is shown in Figure 5-19.

Figure 5-19. Running Documents window

In this window, you need to select the document you want to
debugthe rendered HTML output of that document will be shown
as a normal HTML file. You will then be able to
set breakpoints and step
through client-side script just as if it were
any other code file, as shown in Figure 5-20.

Figure 5-20. Debugging client-side script

Web applications are constantly trying to behave more like their
Windows client brethren, and this means more and more client-side
scripting. The ability to debug client-side script can save
tremendous amounts of time when trying to find bugs in it or when
simply trying to understand the flow of the application.