firebug实用技巧.doc

第 8 章 调试技巧理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同的原因而犯各种各样的错误，以至于给所构建的系统带来不同程度的危害。有些错误浅显而低级，比如用错了大小写，或者写错了变量名等等；而有些错误是复杂的逻辑错误，这类错误往往隐藏较深，不容易找出错误的原因；另外一些错误可能是功能实现的方式有问题，导致程序有性能瓶颈等等。可以说，软件开发就是不断编码和调试的过程。使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。本章将向读者详细介绍使用 Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。8.1 深入解析 Firebug 的调试功能在本书的第五章中已经向读者介绍过了 Firefox 浏览器的优秀调试插件 Firebug 的界面和基本功能。本节将向读者深入讲解如何利用 Firebug 的控制台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行 JavaScript 代码，以及如何使用脚本查看器进行脚本的调试。8.1.1 检查常规错误当 Firefox 遇到一个 JavaScript 错误时，Firebug 会在其控制台输出一个错误信息。这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。下面这个示例中，在测试按钮的事件处理函数中调用了一个不存在的函数，代码如下所示。 console demo function errorTest() notExistFunction();/不存在的函数 用 Firefox 打开页面，如图 8.1 所示。单击“test button”按钮，按钮的 click 事件处理函数 errorTest会被调用，这时候 errorTest 会调用一个不存在的函数 notExistFunction，从而引发一个错误。浏览器遇到220脚本错误时，右下角 Firebug 的绿色小图标会变成红色以提示当前页面存在脚本错误，如图 8.2 所示。图 8.1 示例程序界面图 8.2 错误提示红色图标后面的数字表示错误的个数。单击红色图标或者按 F12 打开 Firebug 界面，如图 8.3 所示。图 8.3 错误提示错误被控制台用红色的字体，配上红色的错误图标醒目的现实了出来。错误的标题是对错误的描述，这里“notExistFunction is not defined”指 notExistFunction 没有被定义。标题下面是发生错误的那一行代码。标题右边是发生错误的文件名和错误代码所在的行号。单击标题后面的文件说明或者标题下面的错误行代码提示，都可以转到脚本查看器并完整的查看该文件的脚本代码，如图 8.4 所示。图 8.4 查看错误代码221标题前面有一个“+”号的小图标，表示标题可以被展开，单击图标展开标题，如图 8.5 所示。图 8.5 展开标题标题展开后，下面显示的分别是包含错误代码的函数或方法，以及当前事件的相关信息。单击函数或方法名，可以转到脚本查看器查看器代码，如图 8.6 所示。图 8.6 查看函数代码单击事件的描述信息，可以转到 DOM 查看器查看事件对象的详细信息，如图 8.7 所示。222图 8.7 查看事件对象当程序中出现错误时，通过查看 Firebug 控制台输出的错误信息可以让开发者快速定位分析并修复错误。8.1.2 完善的 log 功能在调试程序时，经常需要让程序在运行过程中输出一些信息，使得开发者可以实时掌握到程序运行的情况。Firebug 的控制台提供了完整的 log 功能，在第五章中读者已经见过 console.log 的使用，下面来向读者介绍所有的 log 语法。1.console.logconsole.log 提供了在控制台中输出信息的基本方法，其语法如下所示。console.log(message1,message2,.,messageN);在代码被执行时，其参数会被连接在一起输出到 Firebug 的控制台中。console.log 还支持 5 种占位符，见表 8-1 所示。表 8-1 console.log占位符占位符符%s%d,%i%f%o说明字符串整数浮点数对象占位符只能在 console.log 的第一个参数中使用。当第一个参数中包含占位符时，程序会根据占位符的数量，取从第二个参数开始的足够数量的参数替换到对应的占位符所在的位置，剩下的其他参数，则按照默认行为被连接到输出信息的末尾。下面的示例演示了 console.log 的用法，其代码如下所示。 console.log demo console.log(message start);var number = 123.22;var int = 55;var string = 321;var object = name:rob,sex:mail;console.log(number = ,number);console.log(number = %f,number);console.log(int = %d,int);console.log(string = %s,string);console.log(object = %o,object);console.log(number = %f , int = %d , string = %s , object = %o,number,int,string,object,others.);console.log(message end) 223使用 Firefox 访问该示例页面，可以看到在 Firebug 的控制台中输出了指定的信息，如图 8.8 所示。图 8.8 console.log 示例2.console.debugconsole.debug 与 console.log 一样可以接受多个参数，所不同的是通过 console.debug 输出的信息会被添加一个链接，单击链接时会根据参数的类型自动转换到其他视图。当参数为DOM对象或者JavaScript 对象时，会转到 DOM 查看器显示对象的详细信息。当参数为 HTML 元素时，则会转到 HTML查看器并定位到该元素节点上。如果参数为一个函数或者方法，则会转到脚本查看器并定位到函数或者方法的定义所在行。如果参数只是一个数字或者字符串等基本类型的值，则不会添加任何链接。比较特殊的是当参数为数组时，Firebug会分析其中每个元素的类型并添加相应的链接。下面的示例显示了console.debug 的用法，代码如下所示。 console.debug demo 224function func(a,b)return a + b;window.onload = function()var object = name:rob,sex:male;var number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementById(node);console.debug(object);console.debug(array);console.debug(number);console.debug(string);console.debug(func);console.debug(node);console.debug(window);console.debug(document);console.debug(screen);console.debug(navigator); console.debug demo 程序运行后，在 Firebug 控制台输出的信息如图 8.9 所示。图 8.9 console.debug 示例单击第一条信息的链接，Firebug 转到 DOM 查看器视图并显示了对象的详细信息，如图 8.10 所示。图 8.10 查看对象详细信息225单击“func(a,b)”这条信息的链接，Firebug 转到脚本查看器视图，并定位到该函数定义所在的行，如图 8.11 所示。图 8.11 查看函数定义单击“”这条信息时，则会转到 HTML 查看器并定位到该元素节点上，如图 8.12 所示。图 8.12 查看 HTML 元素3. 的功能与 console.debug 一样，所不同的是其会在输出到 Firebug 控制台的信息前面加上一个表示注意信息的小图标。例如，将上面示例中的 console.debug 替换成 ，如下所示。 demo 226function func(a,b)return a + b;window.onload = function()var object = name:rob,sex:male;var number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementById(node);(object);(array);(number);(string);(func);(node);(window);(document);(screen);(navigator); demo 其输出效果如图 8.13 所示。图 8.13 示例4.console.warnconsole.warn 的功能与 console.debug 一样，所不同的是会在输出到 Firebug 控制台的信息前面加上一个表示警告的图标，并将信息背景色设置为绿色。例如，将上面示例代码中的全部修改为 console.warn，如下所示。 console.warn demo function func(a,b)return a + b;window.onload = function()var object = name:rob,sex:male;var number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementById(node);console.warn(object);console.warn(array);console.warn(number);console.warn(string);console.warn(func);console.warn(node);console.warn(window);console.warn(document);console.warn(screen);console.warn(navigator); console.warn demo 其输出到控制台的信息如图 8.14 所示。图 8.14 console.warn 示例5.console.error227228console.error 的功能与 console.debug 一样，所不同的是会在输出到 Firebug 控制台的信息前面加上表示错误的图标，并在浏览器右下角Firebug的小图标中提示错误。将上面示例代码中的console.warn全部修改为 console.error，如下所示。 console.error demo function func(a,b)return a + b;window.onload = function()var object = name:rob,sex:male;var number = 12;var string = 123;var array = 1,2,3,object,number,string;var node = document.getElementById(node);console.error(object);console.error(array);console.error(number);console.error(string);console.error(func);console.error(node);console.error(window);console.error(document);console.error(screen);console.error(navigator); console.error demo 其输出效果如图 8.15 所示。6.console.assert图 8.15 console.error 示例229console.assert 可以进行断言，它接受 1 个表达式作为参数，当表达式的值为 true 时，不输出任何信息，当表达式的值为 false 时，输出一条表示断言失败的错误信息。console.assert 还可以接受更多的参数，以此作为断言失败时显示的信息。下面的示例使用 console.assert 来判断传入函数的参数的数据类型，代码如下所示。 console.assert demo function func(a,b)console.assert(typeof a = string,argument a is not a string);console.assert(typeof b = number,argument b is not a number);/do something.console.log(func(123,1);func(123,1);console.log(func(123,1);func(123,1);console.log(func(new Object(),123);func(new Object(),123);console.log(func(sss,);func(sss,); 其输出到控制台的结果如图 8.16 所示。2307.console.dir图 8.16 console.assert 示例console.dir 可以直接将对象或 HTML 元素的详细信息输出到 Firebug 中，就同在 DOM 查看器中查看到的信息一样。下面的例子演示了 console.dir 的用法。 console.dir demo window.onload = function()var object = a:123,b:44,c:null,d:function()console.log(object information);console.dir(object);console.log(node information);console.dir(document.getElementById(node); console.dir demo 其在控制台中输出的内容如图 8.17 所示。8.console.dirxml图 8.17 console.dir 示例231console.dirxml 能够将 HTML 或 XML 节点元素的源代码输出到控制台中，就如同在 HTML 查看器中看到的效果一样，参考下面的示例代码。 console.dirxml demo window.onload = function()console.log(node: p);console.dirxml(document.getElementById(node);console.log(node: body);console.dirxml(document.body); console.dirxml demo 232其输出到控制台的信息如图 8.18 所示。图 8.18 console.dirxml 示例9.console.trace通过在函数或者方法内添加 console.trace()语句，可以在 Firebug 的控制台中输出函数被调用的信息以及调用该函数的函数或者方法。下面的示例演示了 console.trace 的用法。 console.trace demo function func(a,b,c)console.trace();function testA()func();function testB()func(1,2,3);var testC = function()func(parameter,a:1,b:2,c:3);testA();testB();testC();(function()func(special);)(); 233程序中先后通过 4 个函数来调用添加了 trace 语句的函数 func，其在控制台输出的信息如图 8.19 所示。图 8.19 console.trace 示例如果函数或者方法存在多层嵌套调用，则 console.trace 会输出整个调用链的信息，示例代码如下。 console.trace demo function funcA()console.trace();function funcB()funcA();function funcC()funcB();function funcD()funcC();funcD(); 在上面的程序中，funcA、funcB、funcC、funcD 存在嵌套调用关系。程序向 Firebug 控制台输出的信息如图 8.20 所示。23410.console.group 和 console.groupEnd图 8.20 查看调用链console.group 和 console.groupEnd 可以给输出的 log 信息进行分组。console.group 标识一个分组开始，其可以接受一个或者多个参数作为该分组的名称或者提示语，console.groupEnd标识一个分组结束。下面的示例中，将一些 log 信息分为了两组，代码如下所示。 console.group demo console.group(Group A);console.log(information);(information);console.warn(information);console.error(information);console.groupEnd();console.group(Group B);console.log(information);(information);console.warn(information);console.error(information);console.groupEnd(); 分组的效果如图 8.21 所示。11.console.time 和 console.timeEnd图 8.21 分组示例235通过将 console.time 和 console.timeEnd 添加到一段代码的开头和结尾，可以计算并输出执行这段代码所花费的时间，以毫秒为单位。console.time接受一个字符串参数作为这个计算器的名字，在遇到一个以同样字符串作为参数的 console.timeEnd 时就会停止计时并输出时间耗费的信息。下面的示例输出了执行一个循环体所花费的时间，代码如下所示。 console.time demo console.time(sum);var sum = 0;for(var i = 0 ;i 1000; i +) sum += i;console.timeEnd(sum); 其输出到 Firebug 控制台的信息如图 8.22 所示。图 8.22 console.time 示例23612.file 和 fileEfile 和 fileEnd 的使用方式与 console.time 和 console.timeEnd 相似，只是他们输出的是对所包含的代码段的性能测试数据，示例代码如下。 file demo function sum()var sum = 0;for(var i = 0 ;i 10000; i +) sum += i;console.log(sum);file(sum);sum();sum();sum();sum();fileEnd(sum); 其输出到控制台的信息如图 8.23 所示。图 8.23 file 示例13.console.countconsole.count 可以统计其自身被执行的次数，它接受一个字符串参数作为输出到控制台的信息的标题。一般将 console.count 放入到函数或者方法中来查看某个函数或者方法被调用的次数。下面的例子演示了 console.count 的用法。 console.count demo var num = 0;function funcA()num +;console.count(funcA);if(num % 2 = 0)funcB();function funcB()console.count(funcB);window.setInterval(funcA,500); 237程序中 console.count 被放置在了函数 funcA 和 funcB 中。funcA 每 500 毫秒执行一次。每执行两次funcA 执行一次 funcB。其输出到控制台的信息如图 8.24 至 8.26 所示。图 8.24 console.count 输出的信息2388.1.3 控制台的命令行功能图 8.25 console.count 输出的信息图 8.26 console.count 输出的信息Firebug的控制台还提供了命令行功能，使得开发者可以直接通过浏览器在当前页面环境下运行JavaScript 程序。如图 8.27 和图 8.28 所示，直接在控制台下面的输入框中输入 JavaScript 代码，然后按回车键，所输入的代码会显示在控制台中，并立即执行该代码。图 8.27 输入代码图 8.28 运行结果239单击命令行输入框右边的红色按钮可以将输入框放大。放大后的输入框会增加run（运行）、clear（清除）和 copy（复制）三个按钮，如图 8.29 所示。图 8.29 放大输入框Firebug还 为 命 令 行 工 具 预 先 定 义 了 一 些 便 捷 的 方 法 ， 例 如 可 以 使 用 $(id) 来 代 替document.getElementById(id)，使用$()来通过 CSS 选择器引用元素节点等等。所有的这些便捷方法请参见表 8-2。表 8-2 命令行便捷方法方法$(id)$(selector)$x(xpath)dir(object)dirxml(node)cd(window)clear()inspect(object,tabName)keys(object)values(object)debug(fn)undebug(fn)monitor(fn)说明通过id返回元素。通过CSS选择器返回元素数组。通过xpath表达式返回元素数组。在控制台中列出对象的所有属性。列出节点的HTML或XML源代码树。切换当前window对象，默认情况下命令行显示的是顶层window对象。清空控制台显示的所有信息。监视一个对象。tabName表示在哪个标签页对该对象进行监视，