首页 > 编程笔记 > JavaScript笔记

使用chrome开发者工具调试JS代码

对 JS 程序的调试,除了在 JS 程序中使用 alert()console.log() 方法跟踪和调试代码外,开发人员也会经常使用一些调试工具。最常用的 JS 调试工具就是一些主流的浏览器的调试工具,如 IE11 浏览器的“开发人员工具”、Firefox 浏览器的“Firebug”工具或较新版本的“开发者>>Web 控制台”以及 Chrome 浏览器的“开发者工具”。

限于篇幅的原因,本节将只介绍 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 所示。
在控制台中运行JS代码
图 5:在控制台中运行 JS 代码

注:控制台中会默认输出 JS 代码中最后一个变量的值,如图 5 中的最后一个“6”就是最后的变量 i 的值。

所有教程

优秀文章