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

 6、  查看 CSS 定义

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

 

图 6-1

 

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

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

 

7、  脚本调试

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

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

图 7-1

图 7-2

 

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

 

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

  

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

 

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

  

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

 

图 7-3

 

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

图 7-4

图 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 ）。如果不想跟踪了，可单击最右边的删除图标取消跟踪。

图 7-6

图 7-7

 

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

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

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

 

图 7-8

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

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

 

8、  查看 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 里面的属性值。

 

9、  查看网络状况

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

 

图 9-1

图 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 ”打开一个新标签浏览。

 

图 9-3

 

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

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

 

10、              命令行调试

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

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

 

图 10-1

 

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

 

图 10-2

 

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

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

 

图 10-3

 

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

 

图 10-4

图 10-5