转：用firebug调试网页

下面这个有些基本的但是太少：

http://huanglz19871030.iteye.com/blog/587010

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

下面这个比较具体

转：http://www.php100.com/html/webkaifa/DIV_CSS/2011/0220/7567.html

相信很多从事Web开发工作的开发者都听说和使用过Firebug，但可能大部分人还不知道，其实它是一个在网页设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件，所以建议各位Web开发者，要充分利用FireFox浏览器和Firebug插件进行日常的调试工作。本文选取了12个Web开发者应该掌握的Firebug的初级使用技巧，介绍给大家。

　　1、使用Firebug可以找到页面中的任何内容

　　不知道各位有无遇到过这样的情况，在一个复杂的HTML页面中，当你想找某个页面元素的实际对应的HTML时，你不得不在一大堆HTML代码中去查找，十分麻烦。有了Firebug，现在你只需要在页面中，用鼠标右键选中某个元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码中找到该元素对应的代码了，十分方便，如下图所示：

 

 

　　同样，也提供了更快速的方法：只需要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中移动时，在Firebug控制台中就马上显示移动时经过的HTML元素的代码：

 

　　2、可以使用Firebug修改HTML和CSS

　　通过Firebug，可以直接修改HTML，增加HTML的属性，删除元素，增加CSS样式及实现更多功能，如下图：

　　在上图的菜单中可以清楚看到，你可以对HTML元素进行各样的修改操作，方法是先点击HTML部分的代码，然后鼠标右键即可在弹出的菜单中进行操作。

　　3、可以通过Firebug查看DOM元素和对XML进行操作

　　当打开一个HTML页通过Firebug查看HTML代码时，你可以同时点在控制面板中的DOM树，就会以DOM的树型结构方式看到整个HTML的结构。而如果你是打开了一个XML文件，那么鼠标右键点XML文件中的任何一个元素，在弹出的菜单中同样可以选择对XML进行相关操作，如下图：

　　4、使用Firebug调试Javascript代码

　　在Firebug控制台中，如果要执行调试Javascript代码，只需要首先将Script控制面版启动，然后在点击Console按钮，在下拉菜单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误)，接着在底部会发现出现>>>的箭头，在这里，你可以输入Javascipt代码，输入后，马上按回车键，就可以执行了，十分方便，如下图：

　　一个小技巧是，在输入Javascipt的时候，还支持使用tab键的自动完成提醒功能，比如对于一个很长的Javascipt函数，在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。

5、多次加载页面后Firebug会记得加载前的位置

　　无论你重复加载多少次页面，Firebug在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部，此时再加载页面，则新的页面加载后，依然把你带到页面底部)。

6、使用$标记去方便访问变量

　　在上面的第4点中，我们提到了在>>>这个命令行下可以进行Javascript的调试，而另外一个技巧是可以使用如$1去访问曾经访问过的变量中的最后一个，如此类推，可以使用$2访问曾经访问过的变量中的倒数第二个。如下图：

　　7、Firebug会高亮度显示修改过的内容

　　在Firebug中，只要你修改过页面中的内容，就会以黄色高亮度显示曾经修改过的内容，如下图：

　　8、监视Javascript的运行性能

　　在Firebug中，你可以点控制台中的“profile(概况)”选项，这将开启Firebug的性能监视功能，之后你可以进行页面的一系列操作，当再次点profile按钮后，将停止对性能的监测活动，接着Firebug会显示一个列表，其中会清楚列明操作过程中所涉及的函数，调用次数，占用时间、平均时间，最小时间，最大时间等，如下图所示：

▲（点击图片查看大图）

9、Firebug强大的网络数据监视功能

　　Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时，经常要观察各类HTTP请求和回应，在这方面Firebug的功能十分强大。首先，只需要开启控制面板中的网络功能，然后在每次运行页面时，都可以清楚看到每个HTTP的请求和HTTP回应的具体细节。如下图：

▲（点击查看大图）

　　在上图中，只要点每一个请求旁边的+号，就可以看到该请求的具体细节，如下图：

　　可以看到，能看到HTTP的头部的各种信息。同样，如果要看当前页面中的比如图片，FLASH等元素的信息等，也可以通过上图去点不同的选项卡去筛选查看，十分方便。

　　10、使用Firebug的Log功能

　　在设计页面时，经常要记录下页面的一些信息，这个时候，可以使用Firebug中的log日志功能，把一些信息输出到firebug的控制台中，这样就方便调试了。Firebug提供了一个console对象，在插件加载的时候就注册到Javascript的运行环境中去了，可以在程序中直接使用。console对象提供了一个log方法，举例说明如下：

< script  language ="javascript"  type ="text/javascript" >  
 console.log('This is log message');  
 console.debug('This is debug message');  
  console.error('This is error message');  
  console.info('This is info message'); 
 console.warn('This is warning message');  
</ script >

 　　在Firefox中执行如下代码，会看到Firebug的控制台中出现如下信息：

　　可以看到，各个级别的日志输出，都带有一个彩色的图标，能给用户很醒目的提醒。同时，console.log 还支持格式化字符串的输出，你可以用类似C语言中printf的语法来调用这个函数：console.log(“%s is %d years old.”, “Bob”, 42)。

　　11、可以在Firebug中调试程序

　　在Firebug控制台的的Javascript控制面板中，可以对页面中的Javascript进行调试，方法很简单，只需要在要调试的行的左边单击，就会出现断点了，之后请记住下面常件的快捷键：

　　(1)  F10 进入下一行；
(2)  F8继续调试；
(3)  F11进入Javascript中的函数体调试；
(4)  Shift+F11跳出函数体。

　　12、在Firebug中可以设置带条件的断点

　　在Firebug中，还可以设置带条件判断的断点，如下图：

　　总结

　　Firefox搭配Firebug在web程序设计中，可谓是“双剑合壁”，功能强大，本文只是选取了其中的一些技巧予以介绍，更多的请参考Firebug官方网站的介绍。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

下面这个有些东西需要知道

http://blog.csdn.net/xmphoenix/article/details/6299898

在本章里，我们将讨论Firebug提供的，以支持JavaScript的开发、调试、概览、以及测试的各种工具。在这里我们将采用典型的

JavaScript用例的方式，并解释如何使用Firebug来实现这些用例。

在本章里，我们将讨论以下主题：

• 命令行API及其功能
• 控制台API
• 单步JavaScript调试
• 插入条件或无条件断点

命令行API

在第2章“Firebug窗口概览”中，我们已经看到了如何使用命令行，这里，我们将讨论的是命令行API提供的一些方法（methods）。这些方法将帮助我们调试JavaScript。下面是具体的描述与用法：

$(id)

这个方法类似于JavaScript中的document.getElementById()。它返回指定ID的单个元素。

我们将使用下面的HTML代码来解释$(id)方法。将这些代码写在一个HTML文件中，并用Firefox将其打开。

现在，当我们在Firebug的命令行中执行如下代码，我们将看见如下的输出窗口：

$("test_id")

$$(选择器)

这个方法返回由指定CSS选择器匹配元素所组成的数组。

Tip

关于CSS选择器更多的信息，可以参考这个链接： http://www.w3.org/TR/css3-selectors

下面的HTML代码片段显示在其DOM树上有四个HTML元素。我们将使用$$(选择器)的方法来选择全部四个元素：

下面的截图显示了在Firebug的命令行中执行 $$('input') 之后的输出结果：

Tip

为了在Firebug的单一命令行执行代码，你需要去掉“控制台”标签下拉菜单中的“更大的命令行”选项选择。

$x(xpath)

此方法返回与给定的XPath表达式相匹配的元素的数组。

Tip

关于XPath更多的信息请参考： http://www.w3schools.com/xpath

为了解释此方法，我们将使用前面的HTML文件来讲解。现在，当我们在Firebug命令行执行如下代码，我们将在Firebug的控制台标签页看到输出结果：

        var objs = $x('html/body/input')
        console.log(objs[0].name)
        console.log(objs[1].name)
        console.log(objs[3].name)
        console.log(objs[3].name)

Note

多行命令行：为了方便，Firebug提供了一个多行命令行编辑器。这是一个迷你编辑器，我们可以在其中输入多行JavaScript命令，甚至输入完整的JavaScript程序，并且我们可以即时执行这些代码。我们可以通过点击控制台标签页内右下角的红色图标 来打开这个多行编辑器。

dir(对象)

这个方法打印出对象的所有属性的交互清单。这个结果与我们在DOM标签页内看到的是一致的。

让我们来看一下与我们在$$(选择器)方法中使用过的HTML代码。如果我们在Firebug的命令行中执行下面的代码，我们将会得到如下的输出：

        var objs = $x('html/body/input')
        dir(objs)

dirxml(节点)

这个方法将打印一个HTML或XML元素的XML源码树。这个结果与我们在HTML标签页内看到的结果是一致的。我们可以在HTML标签页内点击任意节点来观察它。

使用相同的HTML文件，在Firebug的代码行中执行如下代码将得到其XML源码树。下面的截图显示了在控制台标签页内产生的输出结果：

        var obj = $$('body')[0]
        dirxml(obj)

我们可以用$(id)选择一个节点后，再将其传递给此方法，或者采用与此类似的其他获取一个节点的方法。

默认情况下，命令行表达式是与页面的顶层窗口相关的。cd()方法将使我们可以使用页面内的框架窗口。

clear()

这个方法将对控制台清屏。此方法提供的功能也可以通过点击“清除”按钮实现，这个按钮在控制台标签页的左上角。

inspect(object[, tabName])

这个方法让我们可以用最适合的标签来检查一个对象，或者使用与可选参数tabName相一致的标签。

可以使用的标签名字有HTML、CSS、SCRIPT，以及DOM。

现在，对我们已经打开的HTML文档，我们在Firebug的命令行中输入下面代码。输出结果将显示在HTML标签页内，截图如下：

        inspect($$('input')[0], 'html')

keys(object)

这个方法返回一个包含此对象所有属性的名字的数组。

还是使用我们前面使用的HTML文件为例，执行下面的代码将显示第一个input标签的全部属性、实体、函数和常量：

        keys($$('input')[0])

values(object)

这个方法将返回一个包含该对象所有属性值的数组。

执行下面的代码将显示DOM树中第一个input标签的所有属性值。

        values($$('input')[0])

debug(fn)和undebug(fn)

这两个方法将在函数的第一行增加或移除断点。

我们将在后面第8章“AJAX开发”中学习这些方法的细节内容。

monitor(函数名)和unmonitor(函数名)

这些方法被用来打开或关闭对一个函数所有调用的日志记录。

通常，为了查看JavaScript中某个函数是否被调用，我们在其内部设置alert()或console.log()方法。这是非常繁琐的事情。首先，我们不得不在一个大的JavaScript文件中找到这个方法，然后我们需要添加alert或log方法。接下来，当我们看到每样事情都对了，我们需要从代码中移除所有的这些日志声明。

Firebug用巧妙的方式来处理这种监视工作。为了判断某个函数是否被调用，我们仅仅需要知道函数的名字就可以了。通过使用monitor()方法，我们可以跟踪发现该函数被调用了多少次。我们将在控制台上看到提示，告诉我们正在被监视的函数是否被调用了。并且，它还会给我们一个指向函数脚本的链接。

我们以下面的代码为例来进行讨论，创建一个HTML文件，输入以下代码，并且用Firefox浏览器打开这个文件：

        
                

                
                        This is the body
                        
                        
                        
                
        ;

现在，在命令行输入下面的代码并且执行：

        monitor(function1)

点击本文档中的按钮“Invoke function1()”。我们将看到，无论何时只要调用了一次function1()函数，Firebug就会在控制台面板上显示其日志记录。如果我们在控制台面板上点击function1()的链接，将跳转到function1()函数所在的行。

下面的代码将取消对function1()函数的监控：

        unmonitor(function1)

monitorEvents(object[, types])

此方法将开启对发送到一个对象的所有事件的日志记录。可选的参数类型指定只记录特定的消息族。类型中最常使用的值是mouse和key。

全部可用类型包括：composition, context menu, drag, focus, form, key, load, mouse, mutation, paint, scroll, text, ui, 以及 xul。

unmonitorEvents(object[, types])

此方法关掉发送到某对象的所有事件的日志记录。

监视和取消监视事件与日志事件是一样的，关于日志事件我们已经在前一章讨论过。

让我们考察全面使用的HTML文件。在命令行执行下面的代码并且点击第一个按钮：

        monitorEvents($("button1"))

下面的截图显示了事件监控情况：

profile([title])和profileEnd()

这两个方法用于开启和关闭JavaScript概况器。可选参数title将作为概况报告的抬头打印在文本中。

下面是在Firebug中启动JavaScript概况器的三个方法：

• 在控制台标签页内点击“概况”按钮
• 从JavaScript代码中使用console.profile("Profiler Title")
• 从命令行中使用profile("Profiler Title")

为查看概况器产生的统计信息，输入如下HTML代码，并保存为HTML文件，然后在浏览器中打开此文件。按F12打开Firebug并且点击“Start”按钮。

        
                
                
                
                
                
                        Click this button to profile JavaScript
                        
                

下面截图显示了概况器产生的统计信息：

概况器的栏目与描述

• 函数（Function）：此栏显示每个函数的名字。
• 调用（Call）：此栏显示该函数被调用的次数。（在本例中loop()函数被调用了3次。）
• 百分比（Percent）：此栏显示每个函数消耗的时间百分比。
• 占用时间（Own Time）：此栏显示在某个函数中代码所占用的时间。例如，foo()没有自己的代码。相反，它只是调用其他函数。因此，它的执行时间占用大约是~0毫秒。如果你看本栏的某些值，我们在此函数内添加一些循环。
• 时间（Time）：此栏显示函数从开始的地方到结束的地方执行所花时间。例如，foo()没有代码。所以，它的执行时间大约是~0毫秒，但是在这个函数里要调用其他函数。所以，其他函数执行的全部时间是4.491毫秒。于是，这里显示了4.54毫秒，这是三个loop()函数执行的时间加上自身foo()函数执行的时间之和。
• 平均时间（Avg）：此栏显示某个函数的平均执行时间。如果我们仅仅调用一次这个函数，我们将看不到差别。但如果此函数被调用了多次，我们将看出差别。计算公式如下：

  平均时间＝自身代码执行时间 ／ 调用次数

• 最小时间和最大时间（Min and Max columns）：这里显示的是函数的最小执行时间。在我们的例子中，我们调用loop()三次。当我们传递1000作为参数时，大约只消耗了很短时间（0.045秒），当我们传递100000给此函数时，它消耗更长的时间（4.036秒）。所以，在本例中，最小时间将显示0.045秒，而最大时间显示为4.036秒。
• 文件（File）：此栏显示函数所在的文件的文件名，并显示所在行数。

控制台API

Firebug对所有加载的页面增加了一个全局变量，命名为“console”。这个对象包括许多方法，这些方法使得我们可以向控制台写入信息，以揭示出脚本运行中的信息。

console.log(object[, objcet, ...])

这个方法向控制台写入一个消息。我们可以传递任意多的参数，这些参数在一个空格分隔行内被链接起来。

log的第一个参数也许是包含类似printf字符串替换模式的字符串。例如：

                console.log("The %s jumped over %d tall buildings", animal, count);

上面的例子可以用非字串替换的方式来重写，效果一样：

                console.log("The", animal, "jumped over", count, "tall buildings");

这两个技术可以联合起来用。如果我们使用字符串替换模式，但是给出的参数多过替换模式使用的参数，其余的参数将附加在空格分隔行内，如下面的代码所示：

        console.log("I am %s and I have:", myName, thing1, thing2, thing3);

如果对对象进行了日志记录，这些对象显示出来的就不止是静态文本，还有交互式的超链接，这些链接分别指向Firebug中与该对象相关的HTML、CSS、脚本或DOM标签页。我们也可以使用%o的模式在字符串中替换超链接。

下面是我们可以使用的字符串替代的全部模式：

Table�1.1.�

字符串
替换模式

%s
字符串

%d, %i
整数（还不支持格式化的数值）

%f
浮点数（还不支持格式化的数值）

%o
对象链接

console.debug(object[, object, ...])

此方法把一个消息写到控制台，这个消息包括了指向此方法被调用的行的超链接。

console.info(object[, object, ...])

此方法向控制台写入一个消息，这个消息带有可视化的信息图标（info icon）、作色代码、以及指向此方法被调用的行的超链接。

console.warn(object[, object, ...])

此方法向控制台写入一个消息，这个消息带有可视化的警告图标、作色代码、以及指向此方法被调用的行的超链接。

console.error(object[, object, ...])

此方法向控制台写入一个消息，这个消息带有可视化的错误图标（error icon）、作色代码、以及指向此方法被调用的行的超链接。

console.assert(expression[, object, ...])

此方法测试一个表达式是否为真，如果不是，它将向控制台写入一个消息，并抛出异常。

console.dir(object)

此方法打印出对象的所有属性的交互式列表。看起来与我们在DOM标签页中看到的视图是一致的。

console.dirxml(node)

此方法打印HTML或XML元素的XML源代码树。这与我们在HTML标签页中看到的是一致的。我们可以通过点击节点在HTML标签页内检查此节点。

console.trace()

此方法输出Javascript代码在被调用时所执行交互式栈的跟踪。

这个栈跟踪列出了栈中的函数细节，以及每一个传递给函数的参数值。通过点击函数，将转到脚本标签页内相应代码的位置。并且，点击参数值将可以查看其在DOM或HTML标签页中的情况。

console.group(object[, object, ...])

此方法想控制台写入一个消息，并且以后向此控制台写入的消息都被缩进的嵌入一个块中。调用console.groupEnd()可以关闭这个块。

console.groupCollapsed(object[, object, ...])

这个方法类似于console.group()，只不过这个块最初是折叠的。

console.groupEnd()

此方法关闭被console.group()或console.groupEnd()最近打开的块。

console.time(name)

此方法用给定的名字创建一个新的计时器。用相同的名字调用console.timeEnd(名字)将停止计时器并且打印出所耗用的时间。

console.timeEnd(name)

此方法终止console.time(name)所创建的定时器，并打印出消耗的时间。

console.profile([title])

此方法启用JavaScript概写器。作为可选项的参数将会出现在概写报告的头部。

console.profileEnd()

此方法将关闭JavaScript概写器并打印出报告。

console.count([title])

此方法将返回count被调用的代码行的执行时间。作为可选参数的标题，将会在count所在行增加一个消息输出。

Note

控制台是一个附加到Web页面的窗口对象上的对象。在Firebug中，这个对象仅仅在控制台被启用时附加。在Firebug Lite，如果Lite在此页中已经安装，则控制台就被附加上。

JavaScript调试

本节介绍使用Firebug如果在内部和外部调试JavaScript。在开始之前，先回忆一下前面章节所介绍的内容：

• 脚本标签页
• 命令行API
• 控制台API

使用Mozilla的Firefox和Firebug来调试JavaScript是一个非常直观的过程。如果我们是Visual Studio的开发者，我们将不会感到使用Firebug来调试JavaScript有什么不同，除了调试器是作为浏览器的一部分之外。

Firebug中单步调试JavaScript

在一个编辑器中输入下列代码，并保存为.html文件，然后使用Firefox打开它：

现在在浏览器中按F12来打开并激活Firebug。点击“脚本”标签页，并在第6行插入断点，如下面的截图所示：

Note

为了核实我们已经插入断点，我们可在脚本标签页的右边“断点”面板中查看断点列表。

在第6行显示一个大的红点，表明这里插入了一个断点。现在，点击“Click Me!”按钮来执行JavaScript代码。

一旦我们点击，JavaScript将停在第6行，断点所在的地方。

现在我们可以单步调试JavaScript，通过点击在脚本标签页下的这些按钮来操作：继续、单步进入、单步跳过、单步退出。

• 继续（F8）：只要脚本的执行被另一断点所终止，这个按钮就使得我们可以继续脚本执行。
• 单步进入（F11）：这个按钮可以使我们单步进入另一个函数的内部。
• 单步跳过（F10）：这个按钮使我们可以单步跳过函数调用。
• 单步退出：这个按钮使我们可以继续脚本的执行并停在下一个断点。

现在，我们点击“单步跳过”并按F10执行第6行并移动到第7行。注意右边的“监控”面板中的divElement的值。在执行第6行之前该值是undefined，在执行第6行之后，它被赋予一个HTML的div元素作为值。让我们来看下面的截图：

如果我们想要看看调用及执行流的栈的情况，只需要点击在脚本标签页的右边点击“堆栈”标签。