限于篇幅的原因，本节将只介绍 Chrome 浏览器的“开发者工具”调试工具，IE 浏览器的“开发人员工具”和 Firefox 浏览器的“Firebug”以及“开发者>>Web 控制台”工具的使用和 Chrome 浏览器的“开发者工具”类似，大家可参考 Chrome 浏览器的“开发者工具”来使用它们。
相对于使用 alert() 方法来定位错误，使用调试工具会更便捷高效。因为调试工具可以在控制台具体指出出错的代码行数，以及具体的错误类型。此外，还可以使用控制台直接运行 JS 代码。接下来我们将通过示例 1 的 JS 代码的的调试来介绍 Chrome 的“开发者工具”的使用。
【例 1】使用 Chrome 的“开发者工具”调试代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用调试工具调试代码</title>
<script>
window.onload = function (){
var sum = 0,i = 1;
var oText = documnt.getElementById('val');
while(sum < 20){
sum += i;
i++;
}
oText.value = sum;
};
</script>
</head>
<body>
累加结果：<input id="val" type="text"/>
</body>
</html>
1. 调试定位错误
在 Chrome 浏览器中运行示例 1 ，当没有得到预期结果时，使用调试工具会比较容易定位错误。操作步骤为：同时按Ctrl+Shift+I组合键，打开 Chrome 浏览器的“开发者工具”，此时在默认打开的“Console”控制台可以看到显示出错代码行及错误类型，如图 1 所示。
图 1：在控制台中显示错误信息
图 1 报引用错误，说文件 ex1-3.html 中的第 9 行代码中的“documnt”没有定义，根据这个错误信息，我们很容易发现原来这个单词写错了，正确的写法是“document”。
2) 跟踪调试代码
使用调试工具，同样也可以跟踪变量的变化，步骤如下。
① 修改图 1 所报错误后，将“开发者工具”中的选项卡切换到“Sources”，将打开一个包含 3 个窗口的界面，在左侧的窗口中双击文件“ex1-3.html”，此时会在中间窗口中打开源代码，如图 2 所示。
图 2：打开源代码
② 对代码添加断点。对代码设置断点的方法是：在需要添加断点的那个代码行的行号处单击鼠标左键，此时该行行号会显示蓝色背景，如图 3 所示。
图 3：设置断点
③ 设置断点后刷新页面，此时根据需要可单击右侧的调试窗口中的这 3 个按钮中的其中一个或按这 3 个按钮对应的快捷键 F10、F11 和 Shift+F11，分别实现逐句（F10）、逐过程（F11）和跳出（Shift+F11）这 3 种调试情况。在调试过程中，我们可以在右侧的调试窗口中的“Local”项中跟踪每一个变量在运行过程中的取值情况，如图 4 所示。
图 4：跟踪调试代码
注：单击右侧调试窗口中的按钮，或同时按Ctrl+/组合键或按“F8”快捷键可以停止代的码调试。
3) 使用控制台运行JS代码
打开 Chrome 浏览器，打开“开发者工具”的控制台，然后在控制台窗口光标所在位置输入 JS 代码或按Ctrl+V组合键复制 JS 代码，然后按“Enter”键回车即可运行控制台中的 JS 代码，如图 5 所示。
图 5：在控制台中运行 JS 代码
注：控制台中会默认输出 JS 代码中最后一个变量的值，如图 5 中的最后一个“6”就是最后的变量 i 的值。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23929.html