本节书摘来自异步社区《jquery与javascript入门经典》一书中的第2章，第2.1节，作者：【美】brad dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
本章介绍如下内容：
到哪里寻找jquery和javascript脚本输出的信息；
如何调试html元素存在的问题；
如何轻松地找出并修复css布局问题；
如何在web浏览器中实时地查看和编辑dom；
如何快速找出并修复javascript问题；
有哪些信息可供用来分析浏览器和web服务器之间的网络流量。
编写javascript和jquery应用程序时，面临的一项重大挑战是找出并修复脚本中的问题。简单的语法错误和无效值可能令您万般沮丧，浪费您大量时间。有鉴于此，出现了一些卓越的工具，可帮助您快速而轻松地找出脚本中的问题。在本章中，您将学习使用firebug调试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所示。至此，成功地完成了网页调试工作。