firebug实用技巧

第 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.infoconsole.info 的功能与 console.debug 同样，所不同的是其会在输出到 Firebug 控制台的信息前面加上一种表达注意信息的小图标。例如，将上面示例中的 console.debug 替代成 console.info，如下所示。 console.info 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);console.info(object);console.info(array);console.info(number);console.info(string);console.info(func);console.info(node);console.info(window);console.info(document);console.info(screen);console.info(navigator); console.info demo 其输出效果如图 8.13 所示。图 8.13 console.info 示例4.console.warnconsole.warn 的功能与 console.debug 同样，所不同的是会在输出到 Firebug 控制台的信息前面加上一种表达警告的图标，并将信息背景色设立为绿色。例如，将上面示例代码中的console.info所有修改为 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);console.info(information);console.warn(information);console.error(information);console.groupEnd();console.group(Group B);console.log(information);console.info(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.console.profile 和 console.profileEndconsole.profile 和 console.profileEnd 的使用方式与 console.time 和 console.timeEnd 相似，只是她们输出的是对所涉及的代码段的性能测试数据，示例代码如下。 console.profile demo function sum()var sum = 0;for(var i = 0 ;i 10000; i +) sum += i;console.log(sum);console.profile(sum);sum();sum();sum();sum();console.profileEnd(sum); 其输出到控制台的信息如图 8.23 所示。图 8.23 console.profile 示例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表达在哪个标签页对该对象进行监视，可选值为“html”、“css”、“script”和“dom”。返回由对象的属性名构成的数组。返回由对象的属性值构成的数组。在函数的第一行增长一种断点。移除在函数第一行的断点。跟踪函数fn的调用。240unmonitor(fn)monitorEvents(object, types)unmonitorEvents(object, types)profile(title) profileEnd()不跟踪函数fn的调用。跟踪对象的事件。Types的可选值为“composition”、“contextmenu”、 “drag”、“focus”,、“form”、“key”、“load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、“focus”,、“form”、“key”、“load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。开始对脚本进行性能测试，可选参数title将作为测试成果的标题。结束脚本性能测试。8.1.4 断点、单步执行和变量信息Firebug 的脚本查看器提供了 JavaScript 的断点和单步执行的调试功能，使得开发者可以以便的跟踪程序运营的状况，并理解运营过程中的多种状态的变化。在程序中添加断点有两种措施：一种是在程序中使用核心字 debugger；此外一种是在脚本查看器中添加断点。1.在程序中使用核心字 debugger目前来使用一种简朴的例子演示该功能，如下所示。 debugger demo function debug()debugger;var a = 1;var b = add(a,1);alert(b);function add(x,y) var sum = x + y; return sum; （1）程序中将函数 debug 注册成为了测试按钮的 click 事件解决函数，并在函数的第一行使用了关键字 debugger。用 Firefox 打开示例页面，并单击“test button”按钮，会发现并没有弹出对话框，而是停止在了 debugger 这一行，如图 8.30 所示。段图 8.30 断点241（2）脚本查看器的脚本代码视图中用黄色的三角形图标标记了目前停留的行，右边的 Watch 窗口显示了目前函数作用域内的所有变量信息。由于变量的定义是存在于整个函数体内的，而初始化则要等到程序执行到初始化变量的代码，因此这时变量 a 和变量 b 的值都是 undefined。Watch 窗口上面部分有4 个控制按钮，如图 8.31 所示。图 8.31 控制按钮（3）控制按钮的第一种是 Continue 按钮，单击该按钮可以让中断的程序恢复正常运营。第二个和第三个分别是 Step Over 按钮和 Step Into 按钮。这两个按钮都提供了单步执行的功能，所不同的是当遇到调用其她函数或者措施的时候，Step Into 会跳入该函数或者措施内而 Step Over 不会。最后一种是 StepOut 按钮，单击该按钮会跳出目前的函数或者措施。（4）使用 Step Over 或者 Step Into 按钮让代码单步执行到第 11 行：var b = add(a,1)。这时候变量 a已经被初始化，在右边 Watch 窗口中可以看到 a 的值已经被更新，如图 8.32 所示。图 8.32 查看变量信息（5）由于这一行代码调用了此外一种函数 add，因此如果单击“Step Into”按钮，则会跳入 add 函数体，如图 8.33 所示。242图 8.33 Step Into（6）而如果使用 Step Over，则不会跳入函数 add 内，如图 8.34 所示。图 8.34 Step Over（7）在使用 Step Into 按钮跳入 add 函数后，如果使用 Step Out 按钮，则会跳出 add 函数返回 debug函数，如图 8.35 所示。图 8.35 Step Out2.使用脚本查看器添加断点使用脚本查看器添加断点非常简朴，只需要在代码所在的行的行号前面用鼠标左键单击即可。目前在第 12 行添加一种断点，如图 8.36 所示。图 8.36 添加断点单击“Continue”按钮让程序继续运营，程序在第 12 行被中断，如图 8.37 所示。图 8.37 再次中断243灵活运用断点、单步执行和 Watch 窗口可以以便的对程序进行进一步的跟踪调试，读者可以多进行一些尝试以便纯熟掌握这些功能的使用。8.1.5 在其她浏览器中使用 Firebug 的控制台虽然 Firebug 插件只能在 Firefox 中使用，但是 Firebug 官方提供了一种 JavaScript 开发的组件，将其涉及到程序页面中就可以在其她浏览器环境中使用 Firebug 的控制台功能，官方将其称为