Code Highlighter

Wednesday 28 March 2012

Debugging JavaScript with VS2010 + Intellisense

If you are a .NET developer and you want to learn JavaScript.  Definitely using VS2010 for debugging your JavaScript is your 1st choice.  Also VS2010 provides  intellisense for JavaScript. You can find more information about the intellinsense here.

Make your IE as a default browser.
Open the IE ->Tools->Internet Options->Programs-> Select "Make default" button.



Enable the Script Debugging Option from the Advanced tab.
deselect the 2 options "Disable script Debugging".



Create an empty web project.


Once you have created your project then add a new html page and name it as "index.htm".


It's  now ready to code your 1st JavaScript with VS2010.  You can copy a sample code from below.
Also do not forget to set the index.htm as the starting page.

<head>
    <title>Debug My JavaScript</title>
</head>
<body>
 
<script type="text/javascript">
<!--
 /*Email Check script credit-JavaScript Kit (www.javascriptkit.com) 200+ free JavaScripts here!*/
    //-->
    function emailcheck(cur) {
        var string1 = cur.email.value;
        if (string1.indexOf("@") == -1) {
            alert("Please input a valid email address!")
            return false
        }
    }
    window.status = "Hello Dac";

</script>
 <form onsubmit="return emailcheck(this)">
    <strong>Enter your email address please:</strong><br>
    <input type="text" size="20" name="email">
    <input type="submit" value="Submit!">
</form>
</body>

You should able to get the intellisense as shown in figure below.



Debugging.
Now, you debug the JavaScript code as you normally debugging the C# code. Set the break point at the line 12 and press the F5.  The IE will appear as the illustrated image below. 



Enter "bad email".  Click on the Submit button, the debugger will stop at the line 12 and you can examine the string1 variable.






No comments:

Post a Comment