软件工程师-Web开发者可能不知道的12个Firebug技巧

1、Web开发发者可能不不知道的112个Fireebug技技巧Fireffox搭配配Fireebug在在web程程序设计中中，可谓是是“双剑合合壁”，功功能强大，本本文选取了了其中的一一些技巧予予以介绍,帮助大家家更好的掌掌握Webb开发的技技能，让开开发事半功功倍！相信很多从从事Webb开发工作作的开发者者都听说和和使用过FFirebbug，但但可能大部部分人还不不知道，其其实它是一一个在网页页设计方面面功能相当当强大的编编辑器，它它可以对HHTML、DOM、CSS、HTTPP和Javvascrript进进行全面的的跟踪和调调试。它是是Fireefox浏浏览器的一一个插件，所所以建议各各位Web

2、b开发者，要要充分利用用FireeFox浏浏览器和FFirebbug插件件进行日常常的调试工工作。本文文选取了112个Weeb开发者者应该掌握握的Firrebugg的初级使使用技巧，介介绍给大家家。1、使用FFirebbug可以以找到页面面中的任何何内容不知道各位位有无遇到到过这样的的情况，在在一个复杂杂的HTMML页面中中，当你想想找某个页页面元素的的实际对应应的HTMML时，你你不得不在在一大堆HHTML代代码中去查查找，十分分麻烦。有有了Firrebugg，现在你你只需要在在页面中，用用鼠标右键键选中某个个元素，然然后在弹出出的菜单中中，选择“查看元素素”，马上上就会在HHTML页页面代

3、码中中找到该元元素对应的的代码了，十十分方便，如如下图所示示：同样，也提提供了更快快速的方法法：只需要要点Firrebugg插件左上上方的箭头头，如下图图所示，则则每当鼠标标在页面中中移动时，在在Fireebug控控制台中就就马上显示示移动时经经过的HTTML元素素的代码：2、可以使使用Firrebugg修改HTTML和CCSS通过Firrebugg，可以直直接修改HHTML，增增加HTMML的属性性，删除元元素，增加加CSS样样式及实现现更多功能能，如下图图：在上图的菜菜单中可以以清楚看到到，你可以以对HTMML元素进进行各样的的修改操作作，方法是是先点击HHTML部部分的代码码，然后鼠鼠标

4、右键即即可在弹出出的菜单中中进行操作作。3、可以通通过Firrebugg查看DOOM元素和和对XMLL进行操作作当打开一个个HTMLL页通过FFirebbug查看看HTMLL代码时，你你可以同时时点在控制制面板中的的DOM树树，就会以以DOM的的树型结构构方式看到到整个HTTML的结结构。而如如果你是打打开了一个个XML文文件，那么么鼠标右键键点XMLL文件中的的任何一个个元素，在在弹出的菜菜单中同样样可以选择择对XMLL进行相关关操作，如如下图：4、使用FFirebbug调试试Javaascriipt代码码在Fireebug控控制台中，如如果要执行行调试Jaavasccriptt代码，只只需

5、要首先先将Scrript控控制面版启启动，然后后在点击CConsoole按钮钮，在下拉拉菜单中选选择显示JJavassciptt及HTMML错误(还可以让让用户选择择显示更多多的错误)，接着在在底部会发发现出现的箭箭头，在这这里，你可可以输入JJavassciptt代码，输输入后，马马上按回车车键，就可可以执行了了，十分方方便，如下下图：一个小技巧巧是，在输输入Javvasciipt的时时候，还支支持使用ttab键的的自动完成成提醒功能能，比如对对于一个很很长的Jaavasccipt函函数，在没没输入完的的时候只要要按tabb键firrebugg就会帮助助你自动补补充完整。5、多次加加载页面后

6、后Fireebug会会记得加载载前的位置置无论你重复复加载多少少次页面，FFirebbug在每每次加载页页面后总会会自己记得得加载前页页面所在的的位置(比比如你已经经在浏览页页面的底部部，此时再再加载页面面，则新的的页面加载载后，依然然把你带到到页面底部部)。6、使用$标记去方方便访问变变量在上面的第第4点中，我我们提到了了在这个命令令行下可以以进行Jaavasccriptt的调试，而而另外一个个技巧是可可以使用如如$1去访访问曾经访访问过的变变量中的最最后一个，如如此类推，可可以使用$2访问曾曾经访问过过的变量中中的倒数第第二个。如如下图：7、Firrebugg会高亮度度显示修改改过的内容容

7、在Fireebug中中，只要你你修改过页页面中的内内容，就会会以黄色高高亮度显示示曾经修改改过的内容容，如下图图：8、监视JJavasscrippt的运行行性能在Fireebug中中，你可以以点控制台台中的“pprofiile(概概况)”选选项，这将将开启Fiirebuug的性能能监视功能能，之后你你可以进行行页面的一一系列操作作，当再次次点proofilee按钮后，将将停止对性性能的监测测活动，接接着Firrebugg会显示一一个列表，其其中会清楚楚列明操作作过程中所所涉及的函函数，调用用次数，占占用时间、平均时间间，最小时时间，最大大时间等，如如下图所示示：9、Firrebugg强大的网网

8、络数据监监视功能Firebbug还提提供了十分分功能强大大的网络数数据监功能能。开发者者在开发wweb应用用时，经常常要观察各各类HTTTP请求和和回应，在在这方面FFirebbug的功功能十分强强大。首先先，只需要要开启控制制面板中的的网络功能能，然后在在每次运行行页面时，都都可以清楚楚看到每个个HTTPP的请求和和HTTPP回应的具具体细节。如下图：在上图中，只只要点每一一个请求旁旁边的+号号，就可以以看到该请请求的具体体细节，如如下图：可以看到，能能看到HTTTP的头头部的各种种信息。同同样，如果果要看当前前页面中的的比如图片片，FLAASH等元元素的信息息等，也可可以通过上上图去点不不

9、同的选项项卡去筛选选查看，十十分方便。10、使用用Fireebug的的Log功功能在设计页面面时，经常常要记录下下页面的一一些信息，这这个时候，可可以使用FFirebbug中的的log日日志功能，把把一些信息息输出到ffirebbug的控控制台中，这这样就方便便调试了。Fireebug提提供了一个个conssole对对象，在插插件加载的的时候就注注册到Jaavasccriptt的运行环环境中去了了，可以在在程序中直直接使用。conssole对对象提供了了一个loog方法，举举例说明如如下：在Fireefox中中执行如下下代码，会会看到Fiirebuug的控制制台中出现现如下信息息：可以看到，各

10、各个级别的的日志输出出，都带有有一个彩色色的图标，能能给用户很很醒目的提提醒。同时时，connsolee.logg 还支持持格式化字字符串的输输出，你可可以用类似似C语言中中prinntf的语语法来调用用这个函数数：connsolee.logg(“%ss is %d yyearss oldd.”, “Bobb”, 442)。11、可以以在Firrebugg中调试程程序在Fireebug控控制台的的的Javaascriipt控制制面板中，可可以对页面面中的Jaavasccriptt进行调试试，方法很很简单，只只需要在要要调试的行行的左边单单击，就会会出现断点点了，之后后请记住下下面常件的的快捷键

11、：(1) FF10 进进入下一行行;(2) FF8继续调调试;(3) FF11进入入Javaascriipt中的的函数体调调试;(4) SShiftt+F111跳出函数数体。12、在FFirebbug中可可以设置带带条件的断断点在Fireebug中中，还可以以设置带条条件判断的的断点，如如下图：FireBBugFirebbug 是是网页浏览览器 Moozillla Fiirefoox 下的的一款开发发类插件，现现属于Fiirefoox的五星星级强力推推荐插件之之一。它集集HTMLL查看和编编辑、Jaavasccriptt控制台、网络状况况监视器于于一体，是是开发JaavaSccriptt、CSSS、HTMML和Ajjax的得得力助手。Fireebug如如同一把精