JavaScript has been disliked by many developers. Since it is not compiled code it is tougher to spot a syntax error early. The web page needs to be opened up in the browser in order for the script syntax to be validated and then executed. Before we begin, I would like to make it clear that this debugging approach is only for Internet Explorer and Visual Studio. For other browsers there are different tools and they handle JavaScript syntax differently. I chose IE because most business applications still rely on IE.
Internet Explorer has three settings that deal with script debugging. They are located under Tools -> Internet Options – > Advanced
Only two out of these three settings are relevant:
- Disable script debugging (Internet Explorer)
- Display a notification about every script error
Here is an example of a simple html webpage:
<HTML>
<HEAD>
<TITLE>My new webpage</TITLE>
<script type="text/javascript">
alert("test");
</script>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
When this page is loaded, IE does not report any errors since the page is syntactically correct.
Let’s introduce a script error on line 5 by not closing the bracket:
<HTML>
<HEAD>
<TITLE>My new webpage</TITLE>
<script type="text/javascript">
alert("test";
</script>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
Before we refresh the page in IE, let’s check “Disable script debugging (Internet Explorer)”.
If we refresh the page now, the page would load as it did in the previous case without any errors reported.
Lets now also check “Display a notification about every script error” to display the script error
When we refresh the page a pop-up dialog with the error line number and description will be displayed.
If we decide to uncheck “Disable script debugging (Internet Explorer)” irrespective of the “Display a notification about every script error” setting, a pop-up dialog will be displayed asking whether we want to debug the error.
Clicking “Yes” invokes VS Just-In-Time debugger and allows us to either open a new instance of VS or choose an existing one to debug the error.
Invoking the VS instance sets the cursor at the line that raised an exception.
This is useful if we want to find an offending line. In most cases we would like to actually debug the script by inspecting the variables and walking the code. In order to be able to do that, IE settings need to be set as they were in the previous example. Since adding a breakpoint to a webpage would not make the debugger break into it, we need a different approach. There is a JavaScript reserved word, “debugger”, that invokes the JIT. We need to edit the webpage by inserting the “debugger” reserved word at the place (line 5 in our case) in the code from where we want to start the debugging process.
<HTML>
<HEAD>
<TITLE>My new webpage</TITLE>
<script type="text/javascript">
debugger;
alert("test");
</script>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
Refreshing the page invokes the JIT. After we select VS instance the debugger is invoked and from that point on we can debug the code as we would any other compiled code such as C#.
Conclusion
The default IE setting disables script debugging and displaying script errors. Too many pages on the internet contain script errors so it makes sense to keep the settings as they are, unless you plan to do debugging.