《jQuery与JavaScript入门经典》——第 2 章　调试jQuery和JavaScript网页 2.1JavaScript控制台

本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章，第2.1节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看

第 2 章 调试jQuery和JavaScript网页

本章介绍如下内容：

到哪里寻找jQuery和JavaScript脚本输出的信息； 如何调试HTML元素存在的问题； 如何轻松地找出并修复CSS布局问题； 如何在Web浏览器中实时地查看和编辑DOM； 如何快速找出并修复JavaScript问题； 有哪些信息可供用来分析浏览器和Web服务器之间的网络流量。

编写JavaScript和jQuery应用程序时，面临的一项重大挑战是找出并修复脚本中的问题。简单的语法错误和无效值可能令您万般沮丧，浪费您大量时间。有鉴于此，出现了一些卓越的工具，可帮助您快速而轻松地找出脚本中的问题。在本章中，您将学习使用Firebug调试JavaScript的基本知识。虽然其他浏览器的开发控制台稍有不同，但大部分原理是相通的。另外，如果您不懂本章的示例代码，也不用担心，本书后面将介绍它们。在您大量地编写代码前，应明白如何调试。

2.1 JavaScript控制台

您首先需要熟悉的工具之一是JavaScript控制台，它让您能够查看JavaScript脚本的输出：错误和日志消息将实时地显示到JavaScript控制台。

例如，脚本存在错误，导致浏览器无法对其进行分析时，这种错误将显示到控制台。除错误外，您还可使用console.log语句在JavaScript控制台显示调试消息。

注意：除console.log外，您还可使用console.error()、console.assert()和其他语句向JavaScript控制台显示日志信息。

2.1.1 理解JavaScript控制台
JavaScript控制台是一个非常简单的工具，但功能强大。它由两部分组成：控件和日志项列表，如图2.1所示。

请注意单击Console（控制台）标签时显示的菜单。使用该菜单可启用控制台，还可指定要在消息列表中显示的错误和日志消息类型。

控制台还提供了包含多个选项的工具栏，这些选项都可通过单击来开关。下面描述了每个选项。

Break On Errors（在所有错误处中断）：启用了该选项时，JavaScript将在脚本中遇到错误时停止执行。如果您要捕获错误并查看错误发生时变量的值，这将很有用。 Clear（清除）：清空消息列表中的消息。 Persist（保持）：保留消息，即便页面被重新加载。如果没有启用该选项，重新加载页面时将清空消息列表。 Profile（概况）：启用和停止跟踪代码执行时间的剖析器。 All（全部）：显示所有消息。在大多数情况下，应显示所有消息，除非您只关注特定的消息。 Error（错误）：只显示错误消息。 Warnings（警告）：只显示警告消息。 Debug Info（调试信息）：只显示调试信息。 Cookies：只显示与Cookie相关的消息。 jQuerify：修改加载jQuery库的脚本，以包含最新的jQuery库代码。这是FireQuery插件提供的功能。

在图2.1所示的消息列表部分，注意到有两种消息。一种是log语句显示的，另一种是错误。在这两条消息的右边，都显示了行号；如果您单击行号，将直接切换到代码。

在错误消息中，注意到上面的文本指出了错误，而下面的文本指出了实际的JavaScript代码。这对调试很有帮助，因为根据指出的错误和代码通常能够发现问题所在。

使用JavaScript控制台找出错误

要明白控制台的用法，最简单的方式是使用它来调试脚本。请看程序清单 2.1 所示的HTML代码，其中包含多种错误。请在Aptana中按如下步骤将这个程序清单加入到项目中。

右击项目并从弹出菜单中选择New Folder。 将文件夹命名为hour02并单击Finish按钮。 右击新建的文件夹并从弹出菜单中选择New File。 将文件命名为hour0201.html。 输入程序清单2.1所示的内容；如果您从配套网站下载了该文件，也可将其内容复制并粘贴到新文件中。 保存文件。
程序清单2.1 一个包含JavaScript错误的简单HTML文档

程序清单 2.1 所示代码的目的如下：在浏览器加载页面后向控制台显示消息 Page Is Loaded；每当用户单击浏览器中的文本Click Me时，都显示消息User Clicked。问题是这个脚本存在多个bug。

文件准备就绪后，按如下步骤使用JavaScript控制台来调试错误。

启动Firefox并单击Firebug图标。 在Firefox中输入下面的URL，以加载新创建的网页。

在Firebug中，单击Console（控制台）标签以显示JavaScript控制台，如图2.2所示。

请注意控制台中显示的错误，如图2.2所示。第一个错误指出loadedFunction()的定义中缺少“，”。第二个错误指出loadedFunction未定义。结合这两个错误可知，loadedFunction()的定义有问题。从定义这个函数的语句可知，function被错误地拼写成了fnction。 在Aptana中，将第6行的单词fnction改为function。 回到 Firefox 并刷新网页。现在控制台只显示了 Page Is Loaded，这是函数loadedFunction()显示的消息，并非错误。 单击文本Click Me，控制台将新增一条错误消息，如图2.3所示。这条错误消息指出clickItNot未定义。在HTML文件中查找clickItNot，发现第15行将事件onclick关联到了clickItNot()，但定义的JavaScript函数名为clickIt()。

在Aptana中，将第15行的clickItNot改为clickIt，再保存文件。 重新加载网页。 再次单击文本Click Me，控制台显示两条日志消息，而没有错误消息，如图2.4所示。至此，成功地完成了网页调试工作。

《jQuery与JavaScript入门经典》——导读 实际上，在您阅读本书期间，互联网上将新增数百万个网页。这些网页大多是使用HTML 编写的，它们使用 CSS 设置元素的样式，并使用 JavaScript 实现用户和后端服务之间的交互。
《jQuery与JavaScript入门经典》——2.8 作业 本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章，第2.8节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
《jQuery与JavaScript入门经典》——2.7 问与答 就Cookie调试而言，您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
《jQuery与JavaScript入门经典》——2.6 小结 您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助，因为这些方法有助于消除常见的简单语法错误，为您节省大量时间，避免令人沮丧的情况发生。
《jQuery与JavaScript入门经典》——2.5 分析网络流量 如果单击“网络”标签上的下拉箭头，将看到一个禁用浏览器缓存的选项。为调试并修复问题而更新了Web服务器上的文件时，这个选项很有用。选择该选项后，浏览器总是从Web浏览器获取最新的内容。
《jQuery与JavaScript入门经典》——2.4 调试jQuery和JavaScript 前面介绍了如何在JavaScript控制台中查找JavaScript和其他脚本的错误。如果脚本并未导致浏览器错误，只是运行方式不符合预期，该如何办呢？Firebug集成了一个优秀的调试器，可助一臂之力。
《jQuery与JavaScript入门经典》——2.3 调试CSS 如果JavaScript或jQuery脚本修改了DOM元素的CSS布局，查看Web浏览器中的代码不会有任何帮助，而需要查看浏览器应用于元素的CSS。为此，需要结合使用CSS检查器以及HTML检查器中的布局检查器和样式检查器。
《jQuery与JavaScript入门经典》——2.2 调试HTML元素 启用该选项后，树视图将切换到文本编辑器视图，让您能够直接在浏览器中编辑HTML代码。浏览器将根据您所做的修改调整渲染结果。虽然这不会修改项目中的代码，但使用这项功能尝试不同的修改要容易得多。将问题修复后，您可复制编辑器中的代码，再将其粘贴到项目文件中。
《jQuery与JavaScript入门经典》——1.5 作业 本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第1章，第1.5节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。