Javascript的调试利器：Firebug使用详解(五)

 命令行的所有特殊函数请看表 3 ：

命令	说明
$(id)	通过 id 返回 Element 。
$$(selector)	通过 CSS 选择器返回 Element 数组。
$x(xpath)	通过 xpath 表达式返回 Element 数组。
dir(object)	列出对象的所有属性，和在 DOM 标签页查看该对象的是一样的。
dirxml(node)	列出节点的 HTML 或 XML 的源代码树，和在 HTML 标签页查看改节点一样。
cd(window)	默认情况下，命令行相关的是顶层 window 对象，使用该命令可切换到 frame 里的 window 独享。
clear()	清空信息显示区，和单击按钮 Clear 功能一样。
inspect(object[, tabName])	监视一个对象。 tabName 表示在那个标签页对该对象进行监视，可选值为“ html ”、“ css ”、“ script ”和“ dom ”。
keys(object)	返回由对象的属性名组成的数组。
values(object)	返回由对象的属性值组成的数组。
debug(fn)	在函数的第一行增加一个断点。
undebug(fn)	移除在函数第一行的断点。
monitor(fn)	跟踪函数 fn 的调用。
unmonitor(fn)	不跟踪函数 fn 的调用。
monitorEvents(object[, types])	跟踪对象的事件。 Types 的可选值为“ composition ”、 “ contextmenu ”、 “ drag ”、 “ focus ” , 、“ form ”、“ key ”、 “ load ”、“ mouse ”、“ mutation ”、“ paint ”、“ scroll ”、“ text”、“ ui ”和“ xul ”。
unmonitorEvents(object[, types])	不跟踪对象的事件。 Types 的可选值为“ composition”、 “ contextmenu ”、 “ drag ”、 “ focus ” , 、“ form ”、“ key ”、 “ load ”、“ mouse ”、“ mutation ”、“ paint ”、“ scroll ”、“ text”、“ ui ”和“ xul ”。
profile([title])	开始对脚本进行性能测试，可选参数 title 将作为测试结果的标题。
profileEnd()	结束脚本性能测试。
表 3

 

命令行有命令记忆功能，可通过上、下箭头键选择已经输入过的命令。

 

11、              在脚本文件中加入调试命令

有没有对脚本调试中经常需要 alert 感到厌烦？有了 Firebug ，你就可以放下 alert 了，因为 Firebug 有功能比 alert 更强大的 console.log 。

先让我们来认识一下 console.log ，在测试文件脚本区域我们输入一下代码：

 

console.log('Hello');

  

   刷新一下页面，将 firebug 切换到“ console ”标签看看（图 11-1 ），在信息区显示出了我们要输出的信息“ Hello ”。当然了，单凭这个就说 console.log 有点夸大，我们修改一下 test 函数，把“ document.getElementById('div2').innerHTML=i; ”修改为：

 

console.log(' 当前的参数是： %d',i);

图 11-1

  

   刷新页面后看看结果（图 11-2 ）。是不是挺不错的？ console.log 可以象 c 语言的 printf 一样实现格式化输出。我们再在脚本区加入一个语句：

 

console.log(2,4,window,test,document);

  

 

图 11-2

  

刷新页面后看看结果（图 11-3 ）。 console.log 可以连续输出多个对象，而且如果对象是 DOM 、函数，还可以直接点击去到该对象。

 

图 11-3

  

如果你觉得 console.log 输出的文本太单调，不能表示出不同的信息，那么你可以通过 console.debug 、 console.info 、 console.warn 和 console.error 来代替 console.log ，这些函数分别会用不同的背景颜色和文字颜色来显示信息。

我们来看看测试一下这些函数的输出，在脚本中加入：

 

console.debug('This is console.debug!');       console.info('This is console.info!');       console.warn('This is console.warn!');       console.error('This is console.error!');

  

   刷新页面看看结果（图 11-4 ）。

 

图 11-4

  

有时候，为了更清楚方便的查看输出信息，我们可能需要将一些调试信息进行分组输出，那么可以使用 console.group 来对信息进行分组，在组信息输出完成后用 console.groupEnd 结束分组。我们测试一下把刚才的 4 个输出作为一个分组输出，修改代码为：

 

console.group(' 开始分组： ');       console.debug('This is console.debug!');       console.info('This is console.info!');       console.warn('This is console.warn!');       console.error('This is console.error!');       console.groupEnd();

  

刷新页面看看结果（图 11-5 ）。在 console.group 中，我们还可以加入一个组标题“ 开始分组： ”。如果需要，我们还可以通过嵌套的方式，在组内再分组。

 

图 11-5

  

有时候，我们需要写一个 for 循环列出一个对象的所有属性或者某个 HTML Element 下的所有节点，有了 firebug 后，我们不需要再写这个 for 循环了，我们只需要使用 console.dir(object) 或 console.dirxml(element) 就可以了。

在测试页中加入代码测试一下：

 

console.dir(document.getElementById('div1'));       console.dirxml(document.getElementById('div1'));

  

    结果请看图 11-6 和图 11-7 。

 

图 11-6

图 11-7

  

是否想知道代码的运行速度？很简单，使用 console.time 和 console.timeEnd 就可以。

修改一下 test 函数的代码，测试一下运行 1000 次循环需要多少时间：