To enable debugging for a particular project, both the project properties and web.config must be updated. To update the project properties, right-click on the project in the Solution Explorer tab, and select Properties. Go to the Web tab, and select the ASP.NET checkbox in the Debuggers section, as shown in the following screenshot:

In the web.config file, go to the configuration/system.web/compilation element. If the element does not exist, add a new node. To enable debugging, the debug property of the <compilation> node should be set to true, as follows:

<compilation debug="true" … />

The first step in debugging is to define breakpoints in the JavaScript code, where the execution will be halted so that variables, program flow, and so on can be inspected. To define breakpoints, just click on the left-hand side gray margin in the source code. Each breakpoint is represented by a small red circle, as shown in the following figure:

Press F5, or navigate to Debug | Start Debugging, to start running the application in the debug mode. The execution will stop at the first breakpoint that it comes across, as shown in the following screenshot:

To launch the Watch window in order to observe the values of variables during runtime, go to Debug | Windows | Watch. This will display the window, as shown in the preceding screenshot.

You will also be able to see a window showing the breakpoints by navigating to Debug | Windows | Breakpoints. The result is shown in the following screenshot:

To trace the code line by line, press F11 or navigate to Debug | Step Into at each line. To skip to the next breakpoint, press F5.

Press Shift + F5 to stop debugging.