Ajax 实用技术第4章 JavaScript基础4.8-4.9
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
菜单按钮——用于调用如图4-7所示的 工具栏。
这里我们主要介绍Console控制台和 Sources源文件选项卡的使用方法。
4.8.1 发现错误
无论是疏忽还是无意，错误在编程中不 可避免，如何才能快速发现并定位错误， 是每个程序员必备的本领。
错误分为语法错误和逻辑错误，语法错 误容易发现，调试环境可以发现这种错 误并加以标识，很容易找到。
这需要借助一定的工具。许多集成的JS IDE中提供了调试功能。我们现在给大 家介绍的是浏览器中集成的“开发者工 具”。看似不起眼的小工具，足可以用 任我们的调试任务。
图4-6 Firefox和Chrome浏览器的开发 者工具
图4-6显示了Firefox和Chrome浏览器中 的开发者工具，F12键可以打开（至少 Firefox和Chrome是这样，其他没有测试 过）。
这里我们看到的错误原因是“Listing47.html:4 Uncaught ReferenceError: adlert is not defined”，说明出现了引用错误， adlert没有定义，说明这个单词拼写错 误，正确的写法是alert，它是JS中的警 告提示框。
我们修改这个错误，重新刷新网页。
本章介绍了JavaScript基本知识，后面还 有许多关于JavaScript的内容。
JS非常重要，它是Ajax编程的基础，所 以必须掌握。
下一章我们将讲述JS的对象、数组与函 数。
◆ 什么是变量？如何声明JavaScript变 量、变量的分类及作用域。
◆ 熟悉JavaScript运算符、表达式和语 句；
◆ 掌握三种JavaScript控制结构——顺 序、分支和循环——及其应用。
◆ 掌握JavaScript异常处理、with语句 和严格模式。
◆ JavaScript基本调试技术。
逻辑错误是指没有语法错误的情况下， 程序运行结果不是预期结果。这种错误 比较隐蔽，很难发现。
要查找逻辑错误，只能从运行结果涉及 的变量、表达式和语句进行分析，逐条 语句的加以排除。查找逻辑错误需要丰 富的经验外加调试工具的熟练使用。
为了说明错误查找过程，我们以清单47所示的代码为例。
清单4-7 JS错误调试 adlert("注意，这是一个警告框！"); var a = 6; var r = a + b; b = 3; out(r);
JS特性（Profiles）——可以记录并显示 JS代码的运行资源特性，如CPU消耗， 堆栈快照以及堆栈分配情况。
网页安全信息（Security）——显示当前 网页的安全性信息。
网页统计信息（Audits）——记录网络 利用率和网页执行效率等信息。
错误提示——显示网页中发现的错误， 以红色叉号及数字显示，数字代表错误 个数。
Source选项卡分为左中右3个部分。从 左到右依次为源码导航区、源码显示区 和调试功能区。
图4-9 Source中错误调试
如果源码没有在中间的源码显示区显示， 可以在左侧的源码导航区中选择要显示的 文件，双击它就可以打开。
这时JavaScript发现一个错误，并在“错误 提示”部分显示，这时单击显示的红色叉 号，可在JS控制台中显示错误详细信息， 并把定位到错误所在行，把错误原因显示 在JS控制台上，并显示错误所在的文件和 行号，单击该行号可以在中间源码显示区 中定位到出错的行，如图4-9底部所示。
代码中我们故意加入了几处错误：（1） 把alert()错写成adlert()；（2）把var r = a+b;写在了b = 3；之前。
我们在Chrome浏览器中打开清单4-7所 示代码的html文件（Listing4-7.html）， 再打开开发者工具，可看到“错误提示” 有1个错误。
源代码显示在Sources选项卡的中间区 域，并在有错的一行画上了红色的波浪 线，并后语句后面标注了红色的错号。 如图4-9所示。
◆ 异常停止（Pause on exceptions）— —遇到异常是否停止执行。这是一开关 按钮，按一次启用，再按一次禁用。启 用情况下，执行中遇到异常则自动停止。
不但可以控制程序的运行，在调试区域 还有各种监视工具可用。
如图4-11所示。通过这些监视工具，可 以全面查看程序运行过程中sume）——跳过断点 继续运行到下一断点（如果有的话）， 如果没有其他断点，则运行到程序结束。
◆ 单步运行（Step over）——执行到下 一条语句后暂停，即按一次按钮执行一 条语句，可以观察程序的运行情况。如 果语句为函数调用语句，也会执行到下 一条语句，而不会进入被调用函数。这 与下面的单步进入不同。
JS控制台（Console）——可以通过 console输出信息，并可以显示网页中 出现的错误。
显示原文件（Sources）——显示网页文 件、CSS文件以及JS文件的源代码。并 可以插入删除断点用于程序调试。
网络实时信息（Network）——可以显 示并记录网页的实时信息。
时间线（Timeline）——可以记录并显 示JS运行特性及内存等的实时信息。
下面以Chrome的开发者工具为例进行 说明。
在Chrome中按F12或者浏览器工具栏右 侧的 图标打开开发者工具窗口，如图 4-6的下图，默认停靠在浏览器窗口的 右侧。单击 按钮可调出如图4-7所示的 工具栏：
图4-7 开发者工具控制工具栏
可以实现开发者工具显示效果的控制，从 左到右依次是独立窗口、底部停靠和右侧 停靠。图4-8为开发者工具独立窗口显示 效果。
4.8 JavaScript调试
到目前为止，你已经写过不少程序了。如果程序 中出现了错误该怎么办？你可能立刻就会想到异 常处理。但异常处理只能发现错误并进行“优雅” 的处理，实质上是掩盖了错误！
这不是我们想要的结果。我们想要发现程序中出 现的语法错误或逻辑错误，从而订正它们，而不 是掩盖它们。
如何才能发现错误呢？
图4-11 各种调试监视工具
在控制程序运行的过程中，可以观察变 量、对象和数组等的值或内容，下面介 绍查看变量表达式值的方法。
点击图4-11的“Watch”右侧的“+”号， 可以添加要观察的变量或者表达式等， 执行完相应的语句后可以显示它们的值。
如我们单击“+”号输入r后回车，在程 序执行到图4-9中的第7行时，则显示 “r: 9”，说明执行第6行var r = a + b;后， 变量r的值为9。
◆ 单步进入（Step into）——如果当前 语句为函数调用，按此按钮则进入被调 用的函数。与上面的单步运行不同。
◆ 单步跳出（Step out）——如果当前 正在被调用的函数中执行，则中止当前 函数的运行，进入调用者函数中继续执 行。
◆ 禁用断点（Deactivate breakpoints）——禁用所有断点。
这时错误定位到了第6行，并在控制台 中提示“Uncaught ReferenceError: b is not defined”，说明出现了引用错误， 变量b没有定义（注意后面的b=3是赋值 语句，不是变量声明，不能自动提 前！）。
我们把var r = a + b;（即图4-9中的第6行， 也就是出现错误的这一行）这一行移到 b=3；这一行的后面，再次刷新网页， 现在没有错误可以正常运行了。
4.8.2 程序调试
程序调试是发现逻辑错误的有力武器， 可以插入断点逐步运行程序，并可以观 察变量、对象、数组和表达式等的内容 和值。
插入断点的方法是在Sources源码区的 左侧行号上单击要插入断点的行，就可 以插入一个断点，再次单击该断点就可 以将其删除。如下图所示：
插入断点后，刷新网页或者打开网页， 程序就会进行中断模式，光标停留在断 点所在的行，并且调试功能区变为可用。 可以通过如图4-10所示的工具栏控制程 序的运行。
图4-8 Chrome开发者工具
窗口顶部显示的是功能选项卡，如下图 所示。
下面从左到右简介如下：
查看元素——单击该按钮，然后在网页 中点击要查看的元素，则会在Elements 选项卡中以高亮的形式显示该元素。对 于结构超复杂的网页十分有用。
显示模式切换——在电脑和移动设备间 切换。
查看网页元素（Elements）——显示当 前网页的结构。并显示查看元素中选中 的元素。
Chrome开发者工具功能十分强大，这 里主要介绍关于程序排错的一些用法， 其他更强大的功能有待大家去发现，继 续努力吧。
4.9 总结
这一章的内容真是不少，是该结束的时 候了。通过这漫长一章的学习，你应学 到以下内容： ◆ 什么是JavaScript，如何编写
JavaScript程序。 ◆ JavaScript的词汇——包括注释、字 面量、标识符和关键字/保留字，数据类 型以及数据类型之间相互转换。
这里我们主要介绍Console控制台和 Sources源文件选项卡的使用方法。
4.8.1 发现错误
无论是疏忽还是无意，错误在编程中不 可避免，如何才能快速发现并定位错误， 是每个程序员必备的本领。
错误分为语法错误和逻辑错误，语法错 误容易发现，调试环境可以发现这种错 误并加以标识，很容易找到。
这需要借助一定的工具。许多集成的JS IDE中提供了调试功能。我们现在给大 家介绍的是浏览器中集成的“开发者工 具”。看似不起眼的小工具，足可以用 任我们的调试任务。
图4-6 Firefox和Chrome浏览器的开发 者工具
图4-6显示了Firefox和Chrome浏览器中 的开发者工具，F12键可以打开（至少 Firefox和Chrome是这样，其他没有测试 过）。
这里我们看到的错误原因是“Listing47.html:4 Uncaught ReferenceError: adlert is not defined”，说明出现了引用错误， adlert没有定义，说明这个单词拼写错 误，正确的写法是alert，它是JS中的警 告提示框。
我们修改这个错误，重新刷新网页。
本章介绍了JavaScript基本知识，后面还 有许多关于JavaScript的内容。
JS非常重要，它是Ajax编程的基础，所 以必须掌握。
下一章我们将讲述JS的对象、数组与函 数。
◆ 什么是变量？如何声明JavaScript变 量、变量的分类及作用域。
◆ 熟悉JavaScript运算符、表达式和语 句；
◆ 掌握三种JavaScript控制结构——顺 序、分支和循环——及其应用。
◆ 掌握JavaScript异常处理、with语句 和严格模式。
◆ JavaScript基本调试技术。
逻辑错误是指没有语法错误的情况下， 程序运行结果不是预期结果。这种错误 比较隐蔽，很难发现。
要查找逻辑错误，只能从运行结果涉及 的变量、表达式和语句进行分析，逐条 语句的加以排除。查找逻辑错误需要丰 富的经验外加调试工具的熟练使用。
为了说明错误查找过程，我们以清单47所示的代码为例。
清单4-7 JS错误调试 adlert("注意，这是一个警告框！"); var a = 6; var r = a + b; b = 3; out(r);
JS特性（Profiles）——可以记录并显示 JS代码的运行资源特性，如CPU消耗， 堆栈快照以及堆栈分配情况。
网页安全信息（Security）——显示当前 网页的安全性信息。
网页统计信息（Audits）——记录网络 利用率和网页执行效率等信息。
错误提示——显示网页中发现的错误， 以红色叉号及数字显示，数字代表错误 个数。
Source选项卡分为左中右3个部分。从 左到右依次为源码导航区、源码显示区 和调试功能区。
图4-9 Source中错误调试
如果源码没有在中间的源码显示区显示， 可以在左侧的源码导航区中选择要显示的 文件，双击它就可以打开。
这时JavaScript发现一个错误，并在“错误 提示”部分显示，这时单击显示的红色叉 号，可在JS控制台中显示错误详细信息， 并把定位到错误所在行，把错误原因显示 在JS控制台上，并显示错误所在的文件和 行号，单击该行号可以在中间源码显示区 中定位到出错的行，如图4-9底部所示。
代码中我们故意加入了几处错误：（1） 把alert()错写成adlert()；（2）把var r = a+b;写在了b = 3；之前。
我们在Chrome浏览器中打开清单4-7所 示代码的html文件（Listing4-7.html）， 再打开开发者工具，可看到“错误提示” 有1个错误。
源代码显示在Sources选项卡的中间区 域，并在有错的一行画上了红色的波浪 线，并后语句后面标注了红色的错号。 如图4-9所示。
◆ 异常停止（Pause on exceptions）— —遇到异常是否停止执行。这是一开关 按钮，按一次启用，再按一次禁用。启 用情况下，执行中遇到异常则自动停止。
不但可以控制程序的运行，在调试区域 还有各种监视工具可用。
如图4-11所示。通过这些监视工具，可 以全面查看程序运行过程中sume）——跳过断点 继续运行到下一断点（如果有的话）， 如果没有其他断点，则运行到程序结束。
◆ 单步运行（Step over）——执行到下 一条语句后暂停，即按一次按钮执行一 条语句，可以观察程序的运行情况。如 果语句为函数调用语句，也会执行到下 一条语句，而不会进入被调用函数。这 与下面的单步进入不同。
JS控制台（Console）——可以通过 console输出信息，并可以显示网页中 出现的错误。
显示原文件（Sources）——显示网页文 件、CSS文件以及JS文件的源代码。并 可以插入删除断点用于程序调试。
网络实时信息（Network）——可以显 示并记录网页的实时信息。
时间线（Timeline）——可以记录并显 示JS运行特性及内存等的实时信息。
下面以Chrome的开发者工具为例进行 说明。
在Chrome中按F12或者浏览器工具栏右 侧的 图标打开开发者工具窗口，如图 4-6的下图，默认停靠在浏览器窗口的 右侧。单击 按钮可调出如图4-7所示的 工具栏：
图4-7 开发者工具控制工具栏
可以实现开发者工具显示效果的控制，从 左到右依次是独立窗口、底部停靠和右侧 停靠。图4-8为开发者工具独立窗口显示 效果。
4.8 JavaScript调试
到目前为止，你已经写过不少程序了。如果程序 中出现了错误该怎么办？你可能立刻就会想到异 常处理。但异常处理只能发现错误并进行“优雅” 的处理，实质上是掩盖了错误！
这不是我们想要的结果。我们想要发现程序中出 现的语法错误或逻辑错误，从而订正它们，而不 是掩盖它们。
如何才能发现错误呢？
图4-11 各种调试监视工具
在控制程序运行的过程中，可以观察变 量、对象和数组等的值或内容，下面介 绍查看变量表达式值的方法。
点击图4-11的“Watch”右侧的“+”号， 可以添加要观察的变量或者表达式等， 执行完相应的语句后可以显示它们的值。
如我们单击“+”号输入r后回车，在程 序执行到图4-9中的第7行时，则显示 “r: 9”，说明执行第6行var r = a + b;后， 变量r的值为9。
◆ 单步进入（Step into）——如果当前 语句为函数调用，按此按钮则进入被调 用的函数。与上面的单步运行不同。
◆ 单步跳出（Step out）——如果当前 正在被调用的函数中执行，则中止当前 函数的运行，进入调用者函数中继续执 行。
◆ 禁用断点（Deactivate breakpoints）——禁用所有断点。
这时错误定位到了第6行，并在控制台 中提示“Uncaught ReferenceError: b is not defined”，说明出现了引用错误， 变量b没有定义（注意后面的b=3是赋值 语句，不是变量声明，不能自动提 前！）。
我们把var r = a + b;（即图4-9中的第6行， 也就是出现错误的这一行）这一行移到 b=3；这一行的后面，再次刷新网页， 现在没有错误可以正常运行了。
4.8.2 程序调试
程序调试是发现逻辑错误的有力武器， 可以插入断点逐步运行程序，并可以观 察变量、对象、数组和表达式等的内容 和值。
插入断点的方法是在Sources源码区的 左侧行号上单击要插入断点的行，就可 以插入一个断点，再次单击该断点就可 以将其删除。如下图所示：
插入断点后，刷新网页或者打开网页， 程序就会进行中断模式，光标停留在断 点所在的行，并且调试功能区变为可用。 可以通过如图4-10所示的工具栏控制程 序的运行。
图4-8 Chrome开发者工具
窗口顶部显示的是功能选项卡，如下图 所示。
下面从左到右简介如下：
查看元素——单击该按钮，然后在网页 中点击要查看的元素，则会在Elements 选项卡中以高亮的形式显示该元素。对 于结构超复杂的网页十分有用。
显示模式切换——在电脑和移动设备间 切换。
查看网页元素（Elements）——显示当 前网页的结构。并显示查看元素中选中 的元素。
Chrome开发者工具功能十分强大，这 里主要介绍关于程序排错的一些用法， 其他更强大的功能有待大家去发现，继 续努力吧。
4.9 总结
这一章的内容真是不少，是该结束的时 候了。通过这漫长一章的学习，你应学 到以下内容： ◆ 什么是JavaScript，如何编写
JavaScript程序。 ◆ JavaScript的词汇——包括注释、字 面量、标识符和关键字/保留字，数据类 型以及数据类型之间相互转换。