firebug实用技巧 .docx

《firebug实用技巧 .docx》由会员分享，可在线阅读，更多相关《firebug实用技巧 .docx（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精品名师归纳总结第 8 章 调试技巧理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会由于不同的缘由而犯各种各样的错误，以至于给所构建的系统带来不同程度的危害。有些错误浅显而低级，比如用错了大小写， 或者写错了变量名等等。而有些错误是复杂的规律错误，这类错误往往隐匿较深，不简洁找出错误的缘由。另外一些错误可能是功能实现的方式有问题，导致程序有性能瓶颈等等。可以说，软件开发就是不断编码和调试的过程。使用好的调试工具并把握好的调试技巧能够加快软件开发进程，提高产品质量。本章将向读者详细介绍使用Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。8.1 深化解

2、析 Firebug 的调试功能在本书的第五章中已经向读者介绍过了Firefox浏览器的优秀调试插件Firebug的界面和基本功能。 本节将向读者深化讲解如何利用Firebug 的把握台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行JavaScript 代码，以及如何使用脚本查看器进行脚本的调试。8.1.1 检查常规错误当 Firefox遇到一个 JavaScript 错误时， Firebug 会在其把握台输出一个错误信息。这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及大事对象信息。下面这个示例中，在测试按钮的大事处理函数中调用了一个不存

3、在的函数，代码如下所示。console demo function errorTestnotExistFunction;/不存在的函数用 Firefox打开页面，如图8.1 所示。单击 “test button”按钮，按钮的 click 大事处理函数 errorTest会被调用，这时候errorTest 会调用一个不存在的函数notExistFunction ，从而引发一个错误。浏览器遇到可编辑资料 - - - 欢迎下载精品名师归纳总结脚本错误时，右下角Firebug 的绿色小图标会变成红色以提示当前页面存在脚本错误，如图8.2 所示。图 8.1示例程序界面图 8.2错误提示红色图标后面的数字

4、表示错误的个数。单击红色图标或者按F12 打开 Firebug 界面，如图 8.3 所示。图 8.3错误提示错误被把握台用红色的字体，配上红色的错误图标醒目的现实了出来。错误的标题是对错误的描述，这里 “notExistFunction is not defined ”指 notExistFunction没有被定义。标题下面是发生错误的那一行代码。标题右边是发生错误的文件名和错误代码所在的行号。单击标题后面的文件说明或者标题下面的错误行代码提示，都可以转到脚本查看器并完整的查看该文件的脚本代码，如图8.4 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.4查看错误代码标题前面有一

5、个 “+”号的小图标，表示标题可以被开放，单击图标开放标题，如图8.5 所示。图 8.5开放标题标题开放后，下面显示的分别是包含错误代码的函数或方法，以及当前大事的相关信息。单击函数或方法名，可以转到脚本查看器查看器代码，如图8.6 所示。图 8.6查看函数代码单击大事的描述信息，可以转到DOM查看器查看大事对象的详细信息，如图8.7 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.7查看大事对象当程序中显现错误时，通过查看Firebug 把握台输出的错误信息可以让开发者快速定位分析并修复错误。8.1.2 完善的 log 功能在调试程序时，经常需要让程序在运行过程中输出一些信息，

6、使得开发者可以实时把握到程序运行的情形。 Firebug 的把握台供应了完整的log 功能，在第五章中读者已经见过console.log 的使用，下面来向读者介绍全部的log 语法。1.console.logconsole.log 供应了在把握台中输出信息的基本方法，其语法如下所示。console.logmessage1,message2,.,messageN;在代码被执行时，其参数会被连接在一起输出到Firebug 的把握台中。 console.log 仍支持 5 种占位符，见表 8-1 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结占位符符%s%d,%i%f%o说明 字符串整数 浮

7、点数对象表 8-1console.log占位符可编辑资料 - - - 欢迎下载精品名师归纳总结占位符只能在 console.log 的第一个参数中使用。当第一个参数中包含占位符时，程序会依据占位符的数量，取从其次个参数开头的足够数量的参数替换到对应的占位符所在的位置，剩下的其他参数，就依据默认行为被连接到输出信息的末尾。下面的示例演示了console.log 的用法，其代码如下所示。console.log demo可编辑资料 - - - 欢迎下载精品名师归纳总结 console.logmessage start; var number = 123.22;var int = 55;var str

8、ing = 321;var object = name:rob,sex:mail; console.lognumber = ,number; console.lognumber = %f,number; console.logint = %d,int; console.logstring = %s,string; console.logobject = %o,object;console.lognumber = %f , int = %d , string = %s , object = %o,number,int,string,object,others.; console.logmessa

9、ge end使用 Firefox拜望该示例页面，可以看到在Firebug 的把握台中输出了指定的信息，如图8.8 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结2.console.debug图 8.8console.log 示例可编辑资料 - - - 欢迎下载精品名师归纳总结console.debug 与 console.log一样可以接受多个参数，所不同的是通过console.debug 输出的信息会被添加一个链接，单击链接时会依据参数的类型自动转换到其他视图。当参数为DOM对象或者JavaScript 对象时，会转到 DOM查看器显示对象的详细信息。当参数为HTML元素时，就会转到

10、HTML查看器并定位到该元素节点上。假如参数为一个函数或者方法，就会转到脚本查看器并定位到函数或者方法的定义所在行。假如参数只是一个数字或者字符串等基本类型的值，就不会添加任何链接。比较特殊的是当参数为数组时， Firebug 会分析其中每个元素的类型并添加相应的链接。下面的示例显示了console.debug 的用法，代码如下所示。console.debug demo可编辑资料 - - - 欢迎下载精品名师归纳总结 function funca,breturn a + b;window.onload = functionvar object = name:rob,sex:male; var

11、number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementByIdnode; console.debugobject; console.debugarray; console.debugnumber; console.debugstring;console.debugfunc; console.debugnode; console.debugwindow; console.debugdocument; console.debugscreen; console

12、.debugnavigator;console.debug demo程序运行后，在Firebug 把握台输出的信息如图8.9 所示。图 8.9console.debug 示例单击第一条信息的链接， Firebug 转到 DOM查看器视图并显示了对象的详细信息，如图8.10 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.10查看对象详细信息单击 “funca,b”这条信息的链接， Firebug 转到脚本查看器视图，并定位到该函数定义所在的行，如图 8.11 所示。图 8.11查看函数定义单击“条”信息时，就会转到HTML查看器并定位到该元素节点上，如图8.12 所示。图 8.1

13、2查看 HTML元素3.console.infoconsole.info 的功能与 console.debug 一样，所不同的是其会在输出到Firebug 把握台的信息前面加上一个表示留意信息的小图标。例如，将上面示例中的console.debug 替换成 console.info，如下所示。console.info demo可编辑资料 - - - 欢迎下载精品名师归纳总结function funca,breturn a + b;window.onload = functionvar object = name:rob,sex:male; var number = 12;var string

14、= 123;var array = 1,2,3,object,number,string;var node = document.getElementByIdnode; console.infoobject;console.infoarray; console.infonumber; console.infostring; console.infofunc; console.infonode; console.infowindow; console.infodocument; console.infoscreen; console.infonavigator;console.info demo

15、其输出成效如图8.13 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结4.console.warn图 8.13console.info 示例可编辑资料 - - - 欢迎下载精品名师归纳总结console.warn 的功能与 console.debug 一样，所不同的是会在输出到Firebug 把握台的信息前面加上一个表示警告的图标，并将信息背景色设置为绿色。例如，将上面示例代码中的console.info全部修改为 console.warn，如下所示。可编辑资料 - - - 欢迎下载精品名师归纳总结console.warn demo function funca,breturn a +

16、 b;window.onload = functionvar object = name:rob,sex:male; var number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementByIdnode; console.warnobject;console.warnarray; console.warnnumber; console.warnstring; console.warnfunc; console.warnnode; console.warnwin

17、dow; console.warndocument; console.warnscreen; console.warnnavigator;console.warn demo其输出到把握台的信息如图8.14 所示。图 8.14console.warn 示例5.console.error可编辑资料 - - - 欢迎下载精品名师归纳总结console.error 的功能与 console.debug 一样，所不同的是会在输出到Firebug 把握台的信息前面加上表示错误的图标，并在浏览器右下角Firebug的小图标中提示错误。将上面示例代码中的console.warn全部修改为 console.er

18、ror，如下所示。console.error demo function funca,breturn a + b;window.onload = functionvar object = name:rob,sex:male; var number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementByIdnode; console.errorobject;console.errorarray; console.errornumber; console.errors

19、tring; console.errorfunc; console.errornode; console.errorwindow; console.errordocument; console.errorscreen; console.errornavigator;console.error demo其输出成效如图8.15 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.15console.error 示例6.console.assertconsole.assert 可以进行断言，它接受1 个表达式作为参数，当表达式的值为true 时，不输出任何信息，当表达式的值为false 时

20、，输出一条表示断言失败的错误信息。console.assert 仍可以接受更多的参数， 以此作为断言失败时显示的信息。下面的示例使用console.assert 来判定传入函数的参数的数据类型，代码如下所示。console.assert demo function funca,bconsole.asserttypeof a = string,argument a is not a string; console.asserttypeof b = number,argument b is not a number;/do something.console.logfunc123,1; func1

21、23,1;console.logfunc123,1;func123,1;console.logfuncnew Object,123; funcnew Object,123; console.logfuncsss,; funcsss,;其输出到把握台的结果如图8.16 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.16console.assert 示例7.console.dirconsole.dir 可以直接将对象或HTML元素的详细信息输出到Firebug 中，就同在 DOM查看器中查看到的信息一样。下面的例子演示了console.dir 的用法。console.dir dem

22、o window.onload = functionvar object = a:123, b:44,c:null,d:functionconsole.logobject information; console.dirobject;console.lognode information; console.dirdocument.getElementByIdnode;console.dir demo其在把握台中输出的内容如图8.17 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.17console.dir 示例8.console.dirxmlconsole.dirxml能够将

23、HTML或 XML节点元素的源代码输出到把握台中，就如同在HTML查看器中看到的成效一样，参考下面的示例代码。console.dirxml demo window.onload = functionconsole.lognode: p; console.dirxmldocument.getElementByIdnode;console.lognode: body; console.dirxmldocument.body;console.dirxml demo可编辑资料 - - - 欢迎下载精品名师归纳总结其输出到把握台的信息如图8.18 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结9

24、.console.trace图 8.18console.dirxml 示例可编辑资料 - - - 欢迎下载精品名师归纳总结通过在函数或者方法内添加console.trace语句，可以在 Firebug 的把握台中输出函数被调用的信息以及调用该函数的函数或者方法。下面的示例演示了console.trace 的用法。console.trace demo function funca,b,cconsole.trace;function testAfunc;function testBfunc1,2,3;var testC = functionfuncparameter,a:1,b:2,c:3;tes

25、tA;testB;testC;functionfuncspecial;可编辑资料 - - - 欢迎下载精品名师归纳总结程序中先后通过4 个函数来调用添加了trace 语句的函数 func，其在把握台输出的信息如图8.19 所示。图 8.19console.trace 示例假如函数或者方法存在多层嵌套调用，就console.trace 会输出整个调用链的信息，示例代码如下。console.trace demo function funcAconsole.trace;function funcBfuncA;function funcCfuncB;function funcDfuncC;funcD;

26、在上面的程序中， funcA 、funcB 、funcC、funcD存在嵌套调用关系。程序向Firebug 把握台输出的信息如图 8.20 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结图 8.20查看调用链10. console.group 和 console.groupEndconsole.group 和 console.groupEnd 可以给输出的 log 信息进行分组。 console.group 标识一个分组开头， 其可以接受一个或者多个参数作为该分组的名称或者提示语，console.groupEnd标识一个分组终止。下 面的示例中，将一些log 信息分为了两组，代码如下所

27、示。console.group demo console.groupGroup A; console.loginformation; console.infoinformation; console.warninformation; console.errorinformation; console.groupEnd; console.groupGroup B; console.loginformation; console.infoinformation; console.warninformation; console.errorinformation; console.groupEnd;

28、分组的成效如图8.21 所示。可编辑资料 - - - 欢迎下载精品名师归纳总结可编辑资料 - - - 欢迎下载精品名师归纳总结11. console.time 和 console.timeEnd图 8.21分组示例可编辑资料 - - - 欢迎下载精品名师归纳总结通过将 console.time 和 console.timeEnd 添加到一段代码的开头和结尾，可以运算并输出执行这段代码所花费的时间，以毫秒为单位。console.time 接受一个字符串参数作为这个运算器的名字，在遇到一个以同样字符串作为参数的console.timeEnd时就会停止计时并输出时间耗费的信息。下面的示例输出了执行一个循环体所花费的时间，代码如下所示。.DOCTYPEhtmlPUBLIC-/W3C/DTD XHTML1.0Transitional/EN http:/www.w3.org