在VisualStudio中调试Javascript

Javascript的调试分为主动调试和被动调试，主动调试指的是开发人员在代码中启动调试，并添加断点来监视代码的执行，而被动调试指的是在代码中出现错误以后，浏览器自动的进入调试状态，开发人员可以进行代码的调试工作。

IE 浏览器默认没有开启被动调试，需要我们开启被动调试的功能，在Internet 选项中：

取消这两项的勾选，这样就可以在代码出现错误的时候，浏览器被动的进入调试状态。

为了查看这一个功能，我们故意在代码中添加一个错误，当浏览器执行到错误的时候，就会进入调试状态：

代码如下：

DOCTYPE html>
<</span>html xmlns="http://www.w3.org/1999/xhtml">
<</span>head>
<</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <</span>title>调试页面</</span>title> <</span>script type="text/javascript"> function btn_click() { var a = 1; var b = "2"; var c = a + b + d; alert(c); } </</span>script> </</span>head> <</span>body> <</span>input type="button" value="确定" onclick="btn_click()" /> </</span>body> </</span>html> 

很明显的，变量 d 没有定义就直接使用了，这是一个错误。当我们点击“确定”按钮之后：

浏览器弹出了一个这样的错误，如果我们要进行调试，点击“是”：

这个时候就打开了调试窗口。

也许你会问，这跟本篇内容有什么关系呢？是的，我们这篇内容讲的是在Visual Studio中调试Javascript代码，不过在IE 中启用Javascript调试功能是一个必要条件。

可能你没有注意到，在IE 弹出的错误窗口中，有两个选项：

刚才直接进入调试窗口，是因为我们勾选了第二个选项，直接在IE 中调试了Javascript。如果我们勾选掉这个选项，然后再单击按钮“是”：

打开的这个窗口就是要我们选择在什么地方进行调试，你可以在已经打开的Visual Studio窗口中调试，也可以在新的窗口中进行调试，我们选择在“新实例Microsoft Visual Studio 2012”中进行调试：

点击“中断”按钮：

这样就进入了Visual Studio中进行调试。另外，如果我们想要在某个位置进行调试，也可以在代码中加入debugger语句，浏览器同样会让我们选择在什么位置进行调试代码：

function btn_click() {
    var a = 1;
    var b = "2";
    debugger
    var c = a + b;
    
    alert(c);
}

我们在刚才的JS中做了一些修改了，删除了错误的变量d，并添加了debugger语句，运行看看效果：

浏览器弹出选择调试器的窗口，剩下的步骤就是一样的了。