Debugging JavaScript using Visual Studio

I really like inbuilt JavaScript debugger of Visual Studio which works like charm with IE browser, and which is rarely used by most of web developers. Most usually opt to put alert in code to test or evaluate value of JavaScript objects.

For debugging JavaScript, all you need to do is to enable script debugging in IE and place some junk characters in your JavaScript code where you want to debug and you are through. Using VS you can step into, step over, place break point in your JavaScript code, adding watch for any object, or even if you want to evaluate any JavaScript object using QuickWatch.

To start debugging, as I said earlier, you need to enable script debugging in IE. Navigate to following in IE:
Tools > Internet Options… > Advanced Tab

In the settings TreeView, check off the node “Disable Script Debugging (Internet Explorer)”.

Now go back to your code and place a string with some junk characters (like “sdsdasd”) in your JavaScript code where your want to debug. I always prefer to use “_test” as standard to put junk string as it help me to find all junk string in code when I am done with debugging. After placing junk string in your code, start your web application and operate it till you reach at that junk string in JavaScript code. IE will then automatically shift you to VS with an error message “Microsoft JScript runtime error: ‘_test’ is undefined”. Click on “Break” button and now your are in debug mode. Move the cursor to the next line of that junk string and set it as next statement (right click anywhere on that line & click “Set Next Statement”:Ctrl+F9). Now you can debug your JavaScript code as you were doing for C#/VB.NET.

Update:
You can also place debugger; keyword as script break point instead of that junk string to start debugging process.