Javascript的调试利器：Firebug使用详解2（转）

页面设计中，我们有时候最头疼的是什么？是盒子模型！为了调整一个 Element 的 margin 、 border 、 padding 和相对位置，我们往往需要花很多工夫去修改源代码，然后刷新页面查看效果。有了 Firebug ，你就可以轻松应对了。我们将右边的区域切换到“ Layout ”标签（图 5-16 ），你会看到一个盒子模型，里面从外到里通过不同的线和颜色划分出了 offset 、 margin 、 border 、 padding 和内容五个区域，里面 4 个区域在每个边上都有 1 个数值，表示该方向上的调整值。我们先在左边选择“ div2 ”，然后把鼠标分别移动到“ Layout ”里的不同区域（图 5-17 ），然后留意一下页面，页面在顶部多了一条水平标尺，在左边多一条垂直标尺，而 4 条实线指示出了当前鼠标指示的区域实际位置，通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量（单位是 px ），当然我们也可以通过 layout 中的数字计算出这些偏移量。在图中，我们还可以看到，在内容区域的外面还有 3 个不同颜色的区域，它们从里到外用不同颜色表示了 padding 、 border 、 margin 的位置和偏移量。只要将鼠标移动到不同区域，页面中的 4 条实线也会改变位置，指示出页面中相应的区域。我们还可以通过修改 Layout 中的数值，对显示效果进行调整。例如我们要将“ div2 ”的内容显示区域扩大到 200 × 200 ，将鼠标移动最左边的 100 上，光标变成“ I ”后，单击鼠标，然后在输入框中输入 200 ，按回车可继续修改高度值，输入 200 ，回车后完成修改。页面中的“ div2 ”区域已经扩展到 200 × 200 了，而源代码也增加了“ style="width: 200px; height: 200px;" ”（图 5-18 ）。我们切换标签到“ Style ”，会发现多了“ element.style {height:200px;width:200px;} ” ( 图 5-19) ，而 CSS 定义里面的高度和宽度都划了横线，表示不起作用了，“ element.style ”表示直接定义在 Element 源代码上的 CSS 属性。有时候某些 Element 会有相同的属性，也有自己特殊的属性，而特殊的属性想写在 Element 的源代码上，就可以在 Style 里单击鼠标右键选择“ Edit Element Style.. ”进行添加。如果有兴趣的话，大家可以尝试修改“ Layout ”里的其它属性值，看看页面的变化，这里我就不再一一说明了。

    如果不想在页面中显示标尺和 4 条实线，可以不选择“ Options ”菜单里的“ Show Rules and Guides ”。

 

<!--[if !vml]--> <!--[endif]-->

图 5-16

 

 

<!--[if !vml]--> <!--[endif]-->

图 5-17

 

<!--[if !vml]--> <!--[endif]-->

图 5-18

 

<!--[if !vml]--> <!--[endif]-->

图 5-19

 

在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容，这里就不一一说明了。 DOM 的说明请看查看 DOM 结构一节，两者是一样的。在源代码区域中如果觉得源代码显示太密，可以将“ Options ”菜单里的“ Show White Space ”选项打开，每个源代码块之间会用空白行隔离。如果要查看源代码的注释内容，请将“ Options ”菜单里的“ Show Comments ”选项打开。

这里要提醒大家一下，在HTML 里调试出正确的源代码和CSS 后，别忘记将源代码和CSS 的修改结果复制到你的源代码文件中，不然你的调试结果在页面刷新后会付之东流。切记！切记！

 

 

<!--[if !supportLists]--> 6、  <!--[endif]--> 查看 CSS 定义

将功能区第二行的标签切换到“ CSS ”，在这里我们可以查看页面中所有的 CSS 定义，包括链接的 CSS 文件。通过功能区的文件选择按钮可以选择不同的含有 CSS 的文件（图 6-1 红色圈住部分）。

 

<!--[if !vml]--> <!--[endif]-->

图 6-1

 

CSS 的定义的编辑这里就不再说明了，这个可以参考 HTML 的“ Style ”操作。

“ Edit ”按钮功能和 HTML 的“ Edit ”功能类似。

 

<!--[if !supportLists]--> 7、  <!--[endif]--> 脚本调试

将功能区第二行的标签切换到“ Script ”，在这里我们可以对页面中所有的脚本进行调试，包括链接的脚本。和 CSS 一样，可以通过文件选择按钮选择不同的脚本文件。

如果要在脚本中设置一个断点，可以单击行号旁边的空白区域，这时会出现一个红色的点表示在这里设置了断点（图 7-1 ），当脚本运行到此会停止运行，等待你的操作。在右边的小窗口将标签切换到“ Breakpoints ”可以查看我们设置的所有断点（图 7-2 ），单击左上角的 checkbox 可以让断点不起作用，如果要删除断点可以单击右上角的删除图标。通过“ Options ”菜单的“ Disable All Breakpoints ”可暂时禁止所有断点，而“ Remove All Breakpoints ”可删除所有断点。在断点标记的红点上单击右键还可以设置断点条件，在符合条件的时候才会停止脚本的执行。

<!--[if !vml]--> <!--[endif]-->

图 7-1

<!--[if !vml]--> <!--[endif]-->

图 7-2

 

下面我们来尝试一下断点的功能。首先在测试页脚本里增加一个 test 的函数，函数的主要操作是运行一个 1000 次的循环，将循环的参数值显示在“ div2 ”里：

 

function test(){              for(var i=0;i<1000;i++){                     document.getElementById('div2').innerHTML=i;              }          }

  

    在“ div 2 ” 里增加一个“onclick ”属性，单击后执行 test ：

 

<div id="div2" onclick='test()'> 方块二</div>

  

刷新页面，然后在“ for(var i=0;i<1000;i++){ ”这行上设置一个断点，并设置条件为“ i=100 ”（图 7-3 ），然后单击“ div2 ”开始执行函数 test 。

 

<!--[if !vml]--> <!--[endif]-->

图 7-3

 

当脚本停下来后，我们将鼠标移动到变量“ i ”上，这时会出现一个小方框，里面有一个数值，这就是变量“ i “的当前值（图 7-4 ）。在脚本调试的时候，你可以通过这个方法很方便的了解到当前变量的值。你还可以通过右边窗口的“ Watch ”标签查看到“ i ”的值（图 7-5 ）。

<!--[if !vml]--> <!--[endif]-->

图 7-4

<!--[if !vml]--> <!--[endif]-->

图 7-5

在“ Watch ”标签窗口我们可以通过“ Options ”菜单选择查看用户自定义属性（ Show User-defined Properties ）、用户自定义函数（ Show User-defined Functions ）、 DOM 属性（ Show DOM Properties ）、 DOM 函数 (Show DOM Functions) 和 DOM 常数 (Show DOM Constants) 。我们还可以通过单击“ New watch expression… ”（图 7-6 淡黄色背景部分）加入自己想跟踪的内容。例如我们想跟踪一下“ div2 ”的显示内容，就可以单击“ New watch expression… ”，加入“ document.getElementById('div2').innerHTML ”，输入中可通过 TAB 键自动完成关键字的输入（图 7-7 ）。如果不想跟踪了，可单击最右边的删除图标取消跟踪。

<!--[if !vml]--> <!--[endif]-->

图 7-6

<!--[if !vml]--> <!--[endif]-->

图 7-7

 

脚本在断点停止后，我们就可以利用搜索框旁的 4 个跟踪按钮进行代码跟踪了（图 7-7 ）。第一按钮是继续运行程序，不再执行跟踪，快捷键是 F8 。第二个按钮是单步执行方式，每次执行一条语句，该方式在遇到函数调用时不进入调用函数内部进行跟踪，快捷键是 F10 。第三个按钮也是单步执行方式，每次执行一条语句，但它遇到函数调用时会进入调用函数内部进行跟踪，快捷键是 F11 。当你进入调用函数内，想马上跳出来时，可以单击第四个按钮，该按钮没有快捷键。

搜索框的作用和 HTML 源代码查看是一样的，不过有一个不同，就是输入“ #n ”（ n ≥ 1 ），可以直接跳到脚本的第 n 行。

当执行脚本在“ console ”标签内显示一个错误，而错误的提示行左边出现一个暗红色的圆点时（图 7-8 ），我们可以单击改红点在该行设置一个断点。

 

<!--[if !vml]--> <!--[endif]-->

图 7-8

我们可以通过“ Script ”标签的“ Options ”菜单的“ Break on All Errors ”选项设置每当脚本发生错误时就中断脚本，进入调试状态。

有时候一个函数随机出现错误，你不可能每次调用都去跟踪一次，而产生错误的原因很可能是传递的参数错误，这时你可以通过跟踪函数调用的功能去检查每次调用函数时的参数情况。操作在函数脚本内单击鼠标右键，在菜单中选择“ Log Calls to xxxxx ”（ xxxxx 为函数名），然后可在“ console ”标签中可查看函数调用情况。

 

<!--[if !supportLists]--> 8、  <!--[endif]--> 查看 DOM 结构

将功能区第二行的标签切换到“ DOM ”可俺层次查看整个页面的 DOM 结构。通过“ Options ”菜单可自定义选择查看用户自定义属性（ Show User-defined Properties ）、用户自定义函数（ Show User-defined Functions ）、 DOM 属性（ Show DOM Properties ）、 DOM 函数 (Show DOM Functions) 或 DOM 常数 (Show DOM Constants) 等内容。

通过双击你可以修改 DOM 里面的属性值。

 

<!--[if !supportLists]--> 9、  <!--[endif]--> 查看网络状况

作为开发人员，是否会经常听到老板或客户抱怨页面下载太慢了？于是你就怀疑是否脚本太多了？忘记压缩图片了？服务器太慢了？网络太慢？确实是头疼的事情。有了 Firebug ，你就可以很容易的对这个问题进行分析和判断了。请将 Firebug 的当前标签切换到“ Net ”（图 9-1 ）。

 

<!--[if !vml]--> <!--[endif]-->

图 9-1

<!--[if !vml]--> <!--[endif]-->

图 9-2

 

从图中我们可以看到，页面中每一个下载文件都用一个灰色条表示它相对其它文件是从什么时候开始下载的，下载时间是多少。在底部我们看到页面发送了多少个请求，下载总量是多少，有多少是有缓存的，下载总共花费了多少时间等信息。

如果只想了解某一样文件的下载情况，你可以单击功能区第一栏的文件分类按钮过滤文件（图 9-2 红色圈住区域 1 ）。

将鼠标在文件中移动，如果是图片，我们可以看到图片的缩略图（图 9-2 红色圈住区域 3 ）。

如果显示为红色的文件名，则表示该文件在服务器中不存在，不能下载，这样你就要检查一下文件的路径是否正确或者是否上传了该文件（图 9-2 红色圈住区域 2 ）。

我们可以展开某个文件，查看它的 HTTP 头信息和返回结果的信息。如果请求的是一个动态页面或 XMLHttpRequest ，则还可以查看提交的变量。通过查看提交的变量和返回信息，我们可以很方便的调试程序是否正确提交了需要的变量和返回了正确的数据。例如从图 36 中，我们可以看到向“ topics-remote.php ”发送了一个请求，提交的参数有“ _dc ”、“ callback ”、“ limit ”和“ start ”四个，值分别为“ 1188637444000 ”、“ stcCallback1001 ”、“ 25 ”与“ 0 ”，从这里我们可以很方便的知道我们脚本操作提交的参数是否正确。切换到“ Response ”页可以看到返回的结果（图 9-3 ），在这里你可以对返回结果进行检查。如果你感觉在这里查看结果很乱，你可以单击鼠标右键，在弹出菜单中选择“ Copy Response body ”复制结果到编辑器查看，你还可以选择“ Open in New Tab ”打开一个新标签浏览。

 

<!--[if !vml]--> <!--[endif]-->

图 9-3

 

通过右键菜单你可以复制文件地址（ Copy Location ）、 HTTP 请求头信息 (Copy Request Headers) 和 HTTP 响应头信息（ Copy Response Headers ）。

如果不想使用该功能，可以选择 Options 菜单的“ Disable Network Monitoring ”关闭该功能。

 

<!--[if !supportLists]--> 10、              <!--[endif]--> 命令行调试

在“ Console ”标签了有一个命令行工具，我们可以在这里运行一些脚本对页面进行调试。

我们在命令行中输入“ document.getElementById('div2').innerHTML ”看看效果（图 10-1 ），别忘了用 TAB 键实现快速输入关键字。在信息区显示了当前“ div2 ”的显示内容。

 

<!--[if !vml]--> <!--[endif]-->

图 10-1

 

要输入“ document.getElementById ”是不是觉得很麻烦？这里有一个简单的办法，用“ $ ”符号代替“ document.getElementById ”，我们再在命令行中输入“ $('div2').innerHTML ”，然后看看结果，是一样（图 10-2 ）。

 

<!--[if !vml]--> <!--[endif]-->

图 10-2

 

当你通过“ Inspect ”锁定了一些 HTML Element 时，你可以通过“ $1 ”来访问最后一个 Element ，依次类推，我们可以通过“ $n ” (n>1) 访问依次倒序访问锁定的 Element 。

我们来实践一下，刷新一下测试页面，然后按下“ Inspect ”按钮，鼠标单击“方块二”，然后在按下“ Inspect ”按钮，单击“方块一”。将 firebug 窗口切换回“ Console ”标签，然后输入“ $1 ”，回车后再输入“ $2 ”，查看一下结果（图 10-3 ），正是我们用锁定过的 Element 。

 

<!--[if !vml]--> <!--[endif]-->

图 10-3

 

在命令行还可以通过“ $$(HTML 标记 ) ”返回一个 Element 数组。我们在测试页输入“ $$(‘div’) ”看看（图 10-4 ）。我们再输入“ $$(‘div’)[0] ”看看（图 10-5 ）。是不是很便于我们对 HTML 进行调试。

 

<!--[if !vml]--> <!--[endif]-->

图 10-4

<!--[if !vml]--> <!--[endif]-->

图 10-5

 

命令行的所有特殊函数请看表 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

 

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

 

<!--[if !supportLists]--> 11、              <!--[endif]--> 在脚本文件中加入调试命令

有没有对脚本调试中经常需要 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);

<!--[if !vml]--> <!--[endif]-->

图 11-1

  

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

 

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

  

 

<!--[if !vml]--> <!--[endif]-->

图 11-2

  

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

 

<!--[if !vml]--> <!--[endif]-->

图 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 ）。

 

<!--[if !vml]--> <!--[endif]-->

图 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 中，我们还可以加入一个组标题“ 开始分组： ”。如果需要，我们还可以通过嵌套的方式，在组内再分组。

 

<!--[if !vml]--> <!--[endif]-->

图 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 。

 

<!--[if !vml]--> <!--[endif]-->

图 11-6

<!--[if !vml]--> <!--[endif]-->

图 11-7