《jQuery与JavaScript入门经典》——第 2 章 调试jQuery和JavaScript网页 2.1JavaScript控制台-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 编写JavaScript和jQuery应用程序时,面临的一项重大挑战是找出并修复脚本中的问题。简单的语法错误和无效值可能令您万般沮丧,浪费您大量时间。有鉴于此,出现了一些卓越的工具,可帮助您快速而轻松地找出脚本中的问题。

本节书摘来自异步社区《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所示。

screenshot

请注意单击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中按如下步骤将这个程序清单加入到项目中。

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

screenshot

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

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

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

screenshot

  1. 在Firebug中,单击Console(控制台)标签以显示JavaScript控制台,如图2.2所示。

screenshot

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

screenshot

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章