The Art of Debugging – A Developer’s Best Friend – Lesson 12 – Debugging Javascript In Web Pages - Repost

The first step is to enable debugging within the browser.

Be sure to allow for script debugging. To do this, start Internet explorer and select from the tools menu. Click on options. Navigate to the advanced tab and make sure the checkboxes in the red box art deselected.

Within the Visual Studio Solution Explorer, make sure that your web project is the startup project.

Once you have made your web project the startup project, now you will define which web page is the start page once you start the debugger.

Start the debugging process by selecting step into, which is the F11 key.

You may be asked to modify the configuration file to enable debugging. You should obviously select yes.

Notice that the instruction pointer has begun running the JavaScript. That this did you can easily single step or step over the code.

The various windows that we discussed previously can be used.

You can see in the JavaScript code above the value of the mydate variable.

Method #2 – To Debug Javascript

The next approach to debugging launches the debugger directly from within Internet explorer. The way this is accomplished is by using the view menu once the web page is loaded. From the View menu select View Script Debugger.

In this example we will select Break At Next Statement.

Your web page will now sit and wait state until JavaScript gets executed. In this case, clicking on the button will initiate some JavaScript. At that point we will be prompted with the opportunity to choose our debugger. We will choose Visual Studio.

Choose yes in the dialog box below.

At this stage we are asked which debugger we wish to use. Since visual studio is the most powerful debugger, we will select Visual Studio. We will select new instance of Visual Studio 2008, since we do not want to interfere with the existing instance of visual studio already open which is running the solution called CSBreakPoints.

Notice that the bug are brought us appropriately to the onclick event.

Step into the code with F11 key. This technique will cover most of the debugging scenarios that you encounter.

We hit the F5 or continue debugging command to finish running the JavaScript. You can see the result below were appropriately.