您的位置：首页 > Web前端 > JavaScript

在IE中调试Javascript

2015-09-01 17:29 766 查看

不管我们写代码的时候如何小心，都不可能完全避免程序中出现bug，这个时侯就需要我们在调试的时候找出错误，修改代码。

Javascript是一门灵活的语言，灵活的语法和它解释执行的特性，使得Javascript中的错误更加难以被察觉，当我们在运行是发现错误后，就要在浏览器中对Javascript进行调试了，目前市场上用户数量最大的浏览器IE自然也具备了调试Javascript的功能，让我们来看看吧！

IE 开发人员工具

IE 浏览器是我们Javascript程序的宿主，负责解释并执行Javascript代码。

新版本的IE 浏览器已经集成了开发人员工具，你可以在工具菜单中找到。IE9 及以上版本，如下图：

另外，还可以使用快捷键 F12 打开开发人员工具。打开后的工具窗口如下图：

这个工具窗口是附加在IE窗口中的，你可以通过右侧的三个按钮来最小化、打开独立窗口或关闭它。

这里需要特别说明一下，在IE6中是没有这个工具的，你需要单独的下载IE Developer Toolbar，然后才能使用；以后的版本都已经集成了，如果需要调试代码，按一下F12唤出调试窗口吧。

调试Javascript代码

为了演示Javascript的调试功能，我做了一个这样的页面，代码很简单：

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

alert(c);
}
</script>
</head>
<body>
<input type="button" value="确定" onclick="btn_click()" />
</body>
</html>

当我们点击页面中的“确定”按钮的时候，执行btn_click()方法。这个时侯，页面弹出c的值：

我们希望得到的值是3，但这里弹出的是12，很显然这不是我们想要的结果（看出错误在哪里了吗？b定义的值是字符串"2"，在和a相加的时候，a被默认转换为字符串类型了，a+b就成了两个字符串相加，结果当然是"12"）。

假设我们不知道原因，现在就需要对这一小段代码进行调试了。按下F12键，打开开发人员工具，点击“脚本”选项卡：