《HTML教程》-4.8-4.9教学材料

这需要借助一定的工具。许多集成的JSIDE中提供了调试功能。我们现在给大家介绍的是浏览器中集成的“开发者工具”。看似不起眼的小工具，足可以用任我们的调试任务。图4-6Firefox和Chrome浏览器的开发者工具图4-6显示了Firefox和Chrome浏览器中的开发者工具，F12键可以打开（至少Firefox和Chrome是这样，其他没有测试过）。下面以Chrome的开发者工具为例进行说明。在Chrome中按F12或者浏览器工具栏右侧的

图标打开开发者工具窗口，如图4-6的下图，默认停靠在浏览器窗口的右侧。单击

按钮可调出如图4-7所示的工具栏：图4-7开发者工具控制工具栏可以实现开发者工具显示效果的控制，从左到右依次是独立窗口、底部停靠和右侧停靠。图4-8为开发者工具独立窗口显示效果。图4-8Chrome开发者工具窗口顶部显示的是功能选项卡，如下图所示。下面从左到右简介如下：查看元素——单击该按钮，然后在网页中点击要查看的元素，则会在Elements选项卡中以高亮的形式显示该元素。对于结构超复杂的网页十分有用。显示模式切换——在电脑和移动设备间切换。查看网页元素（Elements）——显示当前网页的结构。并显示查看元素中选中的元素。JS控制台（Console）——可以通过console输出信息，并可以显示网页中出现的错误。显示原文件（Sources）——显示网页文件、CSS文件以及JS文件的源代码。并可以插入删除断点用于程序调试。网络实时信息（Network）——可以显示并记录网页的实时信息。时间线（Timeline）——可以记录并显示JS运行特性及内存等的实时信息。JS特性（Profiles）——可以记录并显示JS代码的运行资源特性，如CPU消耗，堆栈快照以及堆栈分配情况。网页安全信息（Security）——显示当前网页的安全性信息。网页统计信息（Audits）——记录网络利用率和网页执行效率等信息。错误提示——显示网页中发现的错误，以红色叉号及数字显示，数字代表错误个数。菜单按钮——用于调用如图4-7所示的工具栏。这里我们主要介绍Console控制台和Sources源文件选项卡的使用方法。4.8.1发现错误

无论是疏忽还是无意，错误在编程中不可避免，如何才能快速发现并定位错误，是每个程序员必备的本领。错误分为语法错误和逻辑错误，语法错误容易发现，调试环境可以发现这种错误并加以标识，很容易找到。逻辑错误是指没有语法错误的情况下，程序运行结果不是预期结果。这种错误比较隐蔽，很难发现。要查找逻辑错误，只能从运行结果涉及的变量、表达式和语句进行分析，逐条语句的加以排除。查找逻辑错误需要丰富的经验外加调试工具的熟练使用。为了说明错误查找过程，我们以清单4-7所示的代码为例。清单4-7JS错误调试adlert("注意，这是一个警告框！"); vara=6; varr=a+b; b=3; out(r); 代码中我们故意加入了几处错误：（1）把alert()错写成adlert()；（2）把varr=a+b;写在了b=3；之前。我们在Chrome浏览器中打开清单4-7所示代码的html文件（Listing4-7.html），再打开开发者工具，可看到“错误提示”有1个错误。源代码显示在Sources选项卡的中间区域，并在有错的一行画上了红色的波浪线，并后语句后面标注了红色的错号。如图4-9所示。Source选项卡分为左中右3个部分。从左到右依次为源码导航区、源码显示区和调试功能区。图4-9Source中错误调试如果源码没有在中间的源码显示区显示，可以在左侧的源码导航区中选择要显示的文件，双击它就可以打开。这时JavaScript发现一个错误，并在“错误提示”部分显示，这时单击显示的红色叉号，可在JS控制台中显示错误详细信息，并把定位到错误所在行，把错误原因显示在JS控制台上，并显示错误所在的文件和行号，单击该行号可以在中间源码显示区中定位到出错的行，如图4-9底部所示。这里我们看到的错误原因是“Listing4-7.html:4UncaughtReferenceError:adlertisnotdefined”，说明出现了引用错误，adlert没有定义，说明这个单词拼写错误，正确的写法是alert，它是JS中的警告提示框。我们修改这个错误，重新刷新网页。这时错误定位到了第6行，并在控制台中提示“UncaughtReferenceError:bisnotdefined”，说明出现了引用错误，变量b没有定义（注意后面的b=3是赋值语句，不是变量声明，不能自动提前！）。我们把varr=a+b;（即图4-9中的第6行，也就是出现错误的这一行）这一行移到b=3；这一行的后面，再次刷新网页，现在没有错误可以正常运行了。4.8.2程序调试程序调试是发现逻辑错误的有力武器，可以插入断点逐步运行程序，并可以观察变量、对象、数组和表达式等的内容和值。插入断点的方法是在Sources源码区的左侧行号上单击要插入断点的行，就可以插入一个断点，再次单击该断点就可以将其删除。如下图所示：插入断点后，刷新网页或者打开网页，程序就会进行中断模式，光标停留在断点所在的行，并且调试功能区变为可用。可以通过如图4-10所示的工具栏控制程序的运行。图4-10开发者工具调试工具栏

◆重新运行（Resume）——跳过断点继续运行到下一断点（如果有的话），如果没有其他断点，则运行到程序结束。

◆单步运行（Stepover）——执行到下一条语句后暂停，即按一次按钮执行一条语句，可以观察程序的运行情况。如果语句为函数调用语句，也会执行到下一条语句，而不会进入被调用函数。这与下面的单步进入不同。◆单步进入（Stepinto）——如果当前语句为函数调用，按此按钮则进入被调用的函数。与上面的单步运行不同。

◆单步跳出（Stepout）——如果当前正在被调用的函数中执行，则中止当前函数的运行，进入调用者函数中继续执行。

◆禁用断点（Deactivatebreakpoints）——禁用所有断点。

◆异常停止（Pauseonexceptions）——遇到异常是否停止执行。这是一开关按钮，按一次启用，再按一次禁用。启用情况下，执行中遇到异常则自动停止。不但可以控制程序的运行，在调试区域还有各种监视工具可用。如图4-11所示。通过这些监视工具，可以全面查看程序运行过程中的各个方面。图4-11各种调试监视工具在控制程序运行的过程中，可以观察变量、对象和数组等的值或内容，下面介绍查看变量表达式值的方法。点击图4-11的“Watch”右侧的“+”号，可以添加要观察的变量或者表达式等，执行完相应的语句后可以显示它们的值。如我们单击“+”号输入r后回车，在程序执行到图4-9中的第7行时，则显示“r:9”，说明执行第6行varr=a+b;后，变量r的值为9。Chrome开发者工具功能十分强大，这里主要介绍关于程序排错的一些用法，其他更强大的功能有待大家去发现，继续努力吧。4.9总结这一章的内容真是不少，是该结束的时候了。通过这漫长一章的学习，你应学到以下内容：

◆什么是JavaScript，如何编写JavaScript程序。◆JavaScript的词汇——包括注释、字面量、标识符和关键字/保留字，数据类型以及数据类型之间相互转换。

◆什么是变量？如何声明JavaScript变量、变量的分类及作用域。

◆熟悉JavaScript运算符、表达式和语句；

◆掌握三种JavaScript控制结