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

<!--[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

  

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

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

 

     function test(){

            console.time('test');

            for(var i=0;i<1000;i++){

                   document.getElementById('div2').innerHTML=i;

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

            }

            console.timeEnd('test');

        }

  

刷新页面，单击“方块二”，看看结果（图11-8）。在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出，而该参数就是信息的标题。

 

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

图11-8

  

是否想知道某个函数是从哪里调用的？console..trace可帮助我们进行追踪。在test函数的结尾加入：

 

            console.trace();

  

刷新页面，单击“方块二”，看看结果（图11-9）。结果显示是在坐标（97，187）的鼠标单击事件执行了test函数，而调用的脚本是在simple.html文件里的第1行。因为是在HTML里面的事件调用了test函数，所以显示的行号是第1行。如果是脚本，则会显示调用脚本的行号，通过单击可以直接去到调用行。

 

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

图11-9

  

如果想在脚本某个位置设置断点，可以在脚本中输入“debugger”作为一行。当脚本执行到这一行时会停止执行等待用户操作，这时候可以通过切换到“Script”标签对脚本进行调试。

    Firebug还有其它的一些调试函数，这里就不一一做介绍，有兴趣可以自己测试。表4是所有函数的列表：

函数	说明
console.log(object[, object, ...])	向控制台输出一个信息。可以输入多个参数，输出将已空格分隔各参数输出。 第一参数可以包含格式化文本，例如： console.log(‘这里有%d个%s’,count,apple); 字符串格式： %s ：字符串。 %d, %i：数字。 %f： 浮点数。 %o -超链接对象。
console.debug(object[, object, ...])	向控制台输出一个信息，信息包含一个超链接链接到输出位置。
console.info(object[, object, ...])	向控制台输出一个带信息图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.warn(object[, object, ...])	向控制台输出一个带警告图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.error(object[, object, ...])	向控制台输出一个带错误图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.assert(expression[, object, ...])	测试一个表示是否为true，如果为false，提交一个例外信息到控制台。
console.dir(object)	列出对象的所有属性。
console.dirxml(node)	列出HTML或XML Element的XML源树。
console.trace()	输出堆栈的调用入口。
console.group(object[, object, ...])	将信息分组再输出到控制台。通过console.groupEnd()结束分组。
console.groupEnd()	结束分组输出。
console.time(name)	创建一个名称为name的计时器，计算代码的执行时间，调用console.timeEnd(name)停止计时器并输出执行时间。
console.timeEnd(name)	停止名称为name的计时器并输出执行时间。
console.profile([title])	开始对脚本进行性能测试，title为测试标题。
console.profileEnd()	结束性能测试。
console.count([title])	计算代码的执行次数。titile作为输出标题。
表4

 

<!--[if !supportLists]-->12、              <!--[endif]-->在IE中使用Firebug

Firebug是Firefox的一个扩展，但是我习惯在IE中调试我的页面怎么办？如果在页面脚本中加入console.log()将调试信息写到Friebug，在IE中肯定是提示错误的，怎么办？不用担心，Frirebug提供了Frirbug Lite脚本，可以插入页面中模仿Firebug控制台。

我们可以从一下地址下载firebug lite：

http://www.getfirebug.com/releases/firebuglite1.0-b1.zip

 

然后在页面中加入：

 

<script language="javascript" type="text/javascript" src="/路径/firebug.js"></script>

  

    如果你不想在IE中模仿Friebug控制台，只是不希望console.log()脚本出现错误信息，那么在页面中加入一下语句：

 

<script language="javascript" type="text/javascript" src="/路径/firebugx.js"></script>

  

如果你不想安装Firebug Lite，只是想避免脚本错误，那么可以在脚本中加入以下语句：

 

if (!window.console || !console.firebug)

{

    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",

    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

 

    window.console = {};

    for (var i = 0; i < names.length; ++i)

        window.console[names[i]] = function() {}

}

  

我们将firebug.js加入到测试页面中，然后打开IE，加载页面。页面加载完成后，我们按下F12键就可以打开控制台了。每次页面刷新后，你都要按F12键打开控制台，是不是很烦？如果不想那么，就在html标签中加入“debug=’true’”，例如：

 

<html debug="true">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug='true'>
<head>
  <title>简单的例子</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
        #div1{background:red;width:100px;height:100px;}
        #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}
        #div3{background:yellow;width:50px;height:50px;margin-left:25px;}
    </style>
<script language="javascript" type="text/javascript" src="firebug/firebug.js"></script>
</head>
<body scroll="no">
  <div id="div1">方块一</div>
  <div id="div2" onclick='test()'>方块二</div>
  <script>
      document.getElementById('div1').innerHTML+='<div id="div3">方块三</div>';
/*      console.log('Hello');
      console.log(2,4,window,test,document);
      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();*/
//      console.dir(document.getElementById('div1'));
//      console.dirxml(document.getElementById('div1'));
      
      function test(){
          console.time('test');
          for(var i=0;i<1000;i++){
              document.getElementById('div2').innerHTML=i;
              //console.log('当前的参数是：%d',i);
          }
          console.timeEnd('test');
          console.trace();
      }
      
  </script>  
</body>
</html>

 end