Debugging Client-Side JavaScript for ASP.NET with Visual Studio
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Several years ago, doing anything clever on a web page required a good understanding of JavaScript—a really good understanding. Nowadays, a lot of the things Windows developers used to do with JavaScript are built into ASPX web controls, but that doesn't mean that you don't need to know how to use the language. Many of the Web 2.0 apps you write can still benefit from JavaScript.
Writing code requires knowing how to debug it, and that's not a bad thing. Even if you depend on your tools to take care of most JavaScript functions, knowing how to debug JavaScript can help you to discover its capabilities and use it more effectively. This article demonstrates how to debug JavaScript in Visual Studio (specifically, Visual Studio 2008, Service Pack 1), and includes some debugging tips that go beyond JavaScript programming.
Enabling Script Debugging
These days, users can choose from a variety of web browsers, including Internet Explorer, Firefox, Safari, Chrome, and Opera, as well as browsers for mobile devices. Designing and building web applications to support all of these browsers (with or without JavaScript) can be substantially more challenging than building software for a single browser.
I use Internet Explorer as the primary target for most of my web development. To narrow the scope of this article, my focus is primarily on JavaScript debugging in Visual Studio .NET, targeted for Internet Explorer. There's a nod to debugging with Firefox and Firebug—but only a brief nod.
To debug JavaScript with Internet Explorer, you need to enable IE's JavaScript debugging. For Firefox, you should download the Firebug plug-in. Let's take a quick look at some configuration and installation steps for JavaScript debugging with these two popular browsers.
Debugging in Internet Explorer
To enable script debugging for Internet Explorer, you need to access the Internet Explorer options. In Internet Explorer, choose Tools > Internet Options. In Visual Studio, choose Tools > Options, expand the Environment node, select the Web Browser option, and click the Internet Explorer Options button. In the Internet Options dialog, enable script debugging by unchecking the "Disable script debugging (Internet Explorer)" option under the Browsing node (see Figure 1).
)
Figure 1 Script debugging in IE is disabled by default.
Visual Studio has dozens of useful debugging options worthy of exploration. For example, in the dialog's Debugging-General section, you can set the option "Warn if script debugging is disabled on launch" if you want to know when the target browser has debugging disabled.
Debugging in Firefox
Among the most popular Firefox plug-ins is Firebug, which is at version 1.3 as of this writing. After installing Firebug, you can set your default browser to Firefox. To set the default browser, open the Solution Explorer in Visual Studio, right-click any ASPX page, select Browse with > Firefox, and click the Set as Default button.
With Firefox established as your default browser and Firebug installed, you can debug your script in Firefox. Select Tools > Firebug > Open Firebug. The Firefox instance now shows the debugging console. To enable script debugging, click the Console tab, check the Script option, and click the "Apply settings for localhost" option.
If you've followed along, taking all of the preceding actions as I've described them, when you run your web application with code to be debugged, Firebug should break on your JavaScript.