10分钟学会前端调节和测量检验利器——FireBug

2015/09/17 · HTML5,
JavaScript · 1
评论 ·
调试

原来的作品出处:
惟吾德馨(@Allen_Bryant)   

时间:2011-02-20 10:05 来源:IT168 作者:网络 点击: 3158 次 【字号:大) 中) 小)】

概述

  FireBug是三个用以网址前端开辟的工具,它是FireFox浏览器的三个增添插件。它能够用于调节和测量试验JavaScript、查看DOM、深入分析CSS、监察和控制互连网流量以至开展Ajax交互作用等。它提供了差相当少前端开采须求的全套成效。官网:www.getfirebug.com

何以赢得Firebug?

因为它是Firefox浏览器的叁个恢宏插件,所以率先要求下载Firefox浏览器。读者可以访谈www.mozilla.com下载并安装Firefox浏览器。安装完毕后用它访问

跻身下图所示页面。点击”增添到Firefox”,然后点击”顿时安装”,最终重复开动Firefox浏览器就能够到位安装。

图片 1

深信广大从事Web开拓职业的开辟者都听他们说和使用过Firebug,但大概大多数人还不驾驭,其实它是一个在网页设计方面作用至极强大的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript实行全面包车型客车追踪和调节和测验。它是Firefox浏览器的多少个插件,所以建议各位Web开荒者

主面板

安装完成现在,在Firefox浏览器之处后方就能够有多少个小虫子的Logo图片 2。单击该Logo后就能够实行Firebug的调节台,也足以通过快速键<F12>来张开调节台。使用Ctrl+F12快速键能够使Firebug独立打开一个窗口而不占用Firefox页面尾部的半空中。

图片 3

从上图中得以观望,Firebug包蕴7个面板:

调整台面板:用于记录日志、大概浏览、错误提醒和施行命令行,同期也用于Ajax的调节和测量试验;

HTML面板:用于查看HTML成分,能够实时地编辑HTML和改换CSS样式,它回顾3个子面板,分别是体制、布局和DOM面板;

CSS面板:用于查看全部页面上的CSS文件,能够动态地校勘CSS样式,由于HTML面板中黄金时代度满含了八个CSS面板,因此该面板将少之又少用到;

剧本面板:用于展现Javascript文件及其所在的页面,也得以用来呈现Javascript的Debug调节和测量检验,包蕴3个子面板,分别是监督、饭店和断点;

DOM面板:用于体现页面上的具有目的;

网络面板:用于监视互连网移动,能够扶持查看多少个页面包车型地铁载入意况,满含文件下载所占领的时日和文书下载出错等消息,也得以用来监视Ajax行为;

Cookies面板:用于查看和调治cookie(要求安装下文财富中所提到的Firecookie)。


 

 

  调节台面板

1.说了算台面板大概浏览

此面板可以用来记录日志,也足以用于输入脚本的命令行。

2.笔录日志

Firebug提供如下几个常用的笔录日志的函数:

console.log:简单的记录日志;

console.debug:记录调节和测试新闻,何况附上行号的超链接;

console.error:在音讯前呈现错误Logo,况兼附上行号的超链接;

console.info:在音信前呈现新闻Logo,并且附上行号的超链接;

console.warn:在纤弱钱呈现警示Logo,况兼附行号的超链接。

在空白的html页面中,向<body>标签中投入<script>标签,代码如下:

JavaScript

<script 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 warn message’); </script>

1
2
3
4
5
6
7
<script 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 warn message’);
</script>

奉行代码后得以在Firebug中来看下图所示的结果,以前习于旧贯了用alert来调节和测验程序,可是在Firebug下得以行使console。

图片 4

3.格式化字符串输出和多变量输出

以此成效相近于C语言中的语法,能够在console记录日志的方式里应用。

%s:字符串  %d,%i:数字  %f:浮点数  %o:链接对象

同期,那多少个函数匡助四个变量。代码如下:

JavaScript

<script type=”text/javascript”> var
kid=”孩子”,count=”3″,man=”Allen”; var
sport1=”篮球”,sport2=”羽球”,sport3=”网球”;
console.log(“%d个%s在玩游戏”,count,kid);
console.log(count,”个”,kid,”在玩游戏”);
console.log(“%s专长的移动有:”,man,sport1,sport2,sport3);
</script>

1
2
3
4
5
6
7
<script type="text/javascript">
  var kid="孩子",count="3",man="Allen";
  var sport1="篮球",sport2="羽毛球",sport3="网球";
  console.log("%d个%s在玩游戏",count,kid);
  console.log(count,"个",kid,"在玩游戏");
  console.log("%s擅长的运动有:",man,sport1,sport2,sport3);
</script>

运营代码后效果如下图所示:

图片 5

Firebug调节台还提供了其余功能,比方检查测量检验函数试行时间、新闻分组、测验驱动、追踪、计数以至查看Javascript轮廓等。越多质感能够访谈.

4.面板内的子菜单

决定台面板内有一排子菜单,分别是消逝、保持、概略、全体等。

图片 6

“清除”用于破除调整新北的内容。“保持”则是把调控新北的内容保留,纵然刷新了照旧还留存。“全体”则是显得整个的信息。前边的“错误”、“警示”、“音讯”、“调节和测验音讯”、“Cookies”菜单则是对负有开展了三个分拣。

“概略”菜单用于查看函数的属性。下边通过二个事例来演示,代码如下:

JavaScript

<button type=”button” id=”btn1″>试行循环1</button>
<button type=”button” id=”btn2″>推行循环2</button>
<button type=”button” id=”btn3″>履行循环3</button>
<script type=”text/javascript”> var f1=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); } function f2(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); }
document.getElementById(“btn1”).onclick=f1;
document.getElementById(“btn2”).onclick=f2;
document.getElementById(“btn3”).onclick=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button type="button" id="btn1">执行循环1</button>
<button type="button" id="btn2">执行循环2</button>
<button type="button" id="btn3">执行循环3</button>
<script type="text/javascript">
    var f1=function(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
    function f2(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
    document.getElementById("btn1").onclick=f1;
    document.getElementById("btn2").onclick=f2;
    document.getElementById("btn3").onclick=function(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
</script>

开垦页面,显示四个开关:

图片 7

开拓页面后,先启用Firebug调控台面板,然后单击“轮廓”菜单,如下图所示:

图片 8

从上海体育地方中能够看见,现身了大器晚成行字,“概况收罗中。再度点击“轮廓”查看结果。”,接着,依次单击“实践循环1”、“推行循环2”、“推行循环3”四个按键各叁次,并再度单击“概略菜单”,就可以见到如下图所示结果:

图片 9

可以看来Firebug展现出了非常详尽的告诉。富含每一种函数的函数名、调用次数、占用时间的百分比、占用时间、时间、平均时间、最小时间、最大时间以致各省的公文的行数等消息。

5.Ajax调试

支配台面板也可用来Ajax调节和测量检验,在任其自流程度上得以代表网络面板。譬如小编打开一个页面,能够在Firebug调整台看见此次Ajax的Http供给头消息和服务器响应头音讯。如下图,它会展现出此次使用的Ajax的GET方法、地址、耗费时间以至调用Ajax央求的代码行数。最关键的是有5个标签,即参数、头消息、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数;第1个标签用于查看响应头音讯和倡议头音信;第多个标签用于查看服务器再次来到的内容;第多少个标签则是翻开服务器重返的HTML结构;第三个标签用于查占卜应的Cookies。

图片 10

例如看不到任何讯息的现身,也许是将此效率关闭了,能够单击“调节台”旁边的下拉箭头,将“呈现XMLHttpRequests”前面包车型地铁勾勾选上就可以。

图片 11

   

HTML面板

1.查看和改进HTML代码

Html面板的无敌之处便是能查看和修正HTML代码,何况这几个代码都以由此格式化的。下边以自身的三个浏览器主页来做讲授。

图片 12

在页面柠檬中湖蓝部分代表元素本人,紫红表示padding部分,玉石白表示margin部分。同不时候能够实时地充裕、改进和删除HTML节点以至品质,如下图所示。此外,单击script节点还能直接查看脚本,此处的本子无论是内嵌在HTML中依然表面导入的,都能够查阅到。相近那也适用于<style>标签内嵌恐怕导入的CSS样式和动态创立HTML代码。

图片 13

在HTML调整台的侧边能够看到整个页面当前的文书档案结构,能够透过单击“+”来进展。当单击相应的成分时,侧面边板中就可以展现出目前因素的样式、布局以致DOM新闻。而当光标移动到HTML树中相应成分上时,下边页面中相应的因素将会被高亮展现。

譬喻,将光标移动到叁个<P>标签上,展现效果如下图所示:

图片 14

在HTML调节台的侧面能够看看全体页面当前的文书档案结构,能够通过单击“+”来张开。当单击相应的成分时,右左边板中就能够显得出脚下因素的体裁、布局以致DOM信息。而当光标移动到HTML树中相应成分上时,上面页面中相应的成分将会被高亮彰显。

例如,将光标移动到五个<P>标签上,显示效果如下图所示:

2.查看(Inspect)

行使查看(Inspect)效率,能够连忙地搜寻到有个别元素的HTML结构,如图:

图片 15

当单击”Inspect”开关后,用鼠标在网页上入选一个成分时,成分会被五个赤褐的框框住,同不时间上面的HTML面板中相应的HTML树也会进行而且高亮彰显。再次单击后就能够退出该格局,并且底部的HTML树也保险在此个景况。通过那么些效果,能够异常快寻觅页面内的要素,调节和测量试验和查找相应代码特别有支持。刷新网页后,页面显示的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”开关能够用于间接编辑选中的HTML代码,而背后展现的是最近成分在整整DOM中的结构路径。

3.查看DOM中被剧本改进的某些

经过JavaScript来改造样式属性的值能够形成都部队分动漫效果。展开页面后,利用查看(Inspect)作用来采撷相应的HTML代码,比方,选中“要闻”,如下图所示:

图片 16

单击“本国”标签后,现身下图所示效果:

图片 17

通过上海体育场地能够观望,HTML查看器会将页面上转移的源委页记录下来,并以浅紫蓝高亮表示。有了那一个职能,网页的暗箱操作将深透产生历史。大家能够运用该功效查看别的网址的卡通效果是什么样促成的。

4.翻看和更改成分的体裁

在侧边的体制面板中,显示了此成分当前有着的体裁。全部的体裁都得以实时地剥夺和改善,如下图所示,通过在”text-align:center”前单击会冒出禁止使用的号子,那样就能够禁止使用此准则。通过平昔在体制value值上单击就足以改过。

图片 18

单击“布局”面板就能够看见此因素具体的布局属性,那是七个职业的盒模型。通过“布局”面板,能够相当的轻易地收看成分的偏移量、外边距、边框、内边距和要素的万丈、宽度等音讯,如下图所示:

图片 19

5.查看DOM的信息

单击“DOM”面板后得以看看此因素的亲力亲为的DOM音信以至函数和事件,如下图所示:图片 20

 

CSS、DOM和网络面板

那3个面板相对于前方2个面板相比较次要,CSS和DOM面板与HTML面板中左边的面板功能相同,但不比HTML面板灵活,由此平时选择得少之甚少。

CSS面板特有的三个效果与利益正是足以分级详细查看页面中内嵌以至动态导入的体裁。如下图所示:

图片 21

单击CSS面板后就足以独家查占卜应的样式。此处张开的体制都是通过格式化的,符合于学习CSS的代码格式和标准。

而在互联网面板中,相对有部分有力的法力,举例张开某些网址首页,Firebug展现效果如下图所示:

图片 22

该页面能够监视每风姿洒脱项成分的加载情形,包罗剧本,图片等的高低以至加载用时等,对于页面优化有着非常重要的意义。

其余,顶端还足以分类查看成分的HTML、CSS、JS等的加载情状,使解析越来越灵敏。

 相信广大从事Web开辟事业的开拓者都听他们说和利用过Firebug,但大概超越四分之三个人还不知情,其实它是叁个在网页设计方面成效相当苍劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript实行完美的追踪和调节和测试。它是Firefox浏览器的三个插件,所以提出各位Web开荒者,要充足利用FireFox浏览器和Firebug插件进行平常的调节和测量试验工作。本文接纳了十个Web开辟者应该调节的Firebug的初级应用技术,介绍给大家。

  脚本面板

剧本面板不仅能够查看页面内的本子,何况还会有强盛的调解功用。

在剧本面板的侧边有“监察和控制”、“旅馆”和“断点”八个面板,利用Firebug提供的装置断掉的功效,能够很平价地调节和测量试验程序,如下图所示:

图片 23

1.静态断点

诸如test.html文件,代码如下:

XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <script
type=”text/javascript”> function doSomething(){ var lab =
document.getElementById(‘messageLabel’); arrs=[1,2,3,4,5,6,7,8,9];
for(var arr in arrs){ lab.innerHTML+=arr+”<br />” } }
</script> </head> <body> <div> <div
id=”messageLabel”></div> <input type=”button” value=”Click
Here” onClick=”doSomething();”/> </div> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
        function doSomething(){
            var lab = document.getElementById(‘messageLabel’);
            arrs=[1,2,3,4,5,6,7,8,9];
            for(var arr in arrs){
                lab.innerHTML+=arr+"<br />"
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="messageLabel"></div>
        <input type="button" value="Click Here" onClick="doSomething();"/>
    </div>
</body>
</html>

运转代码后得以看看下图所示效果。图中加粗并有颜色的行号表示此处为JavaScript代码,能够在这处安装断点。比方在第6行那句代码前面单击一下,那它后边就能够冒出四个本白的圆点,表示此处已经被安装了断点。那时,在左侧断点面板的断点列表中就涌出了刚刚设置的断点。要是想临时禁止使用有个别断点,能够在断点列表中去掉有个别断点的后边的复选框中的勾,那么这时候左臂面板中相应的断点就从红暗紫形成了红铁锈栗色了。

图片 24

安装完断点之后,大家就足以调节和测量检验程序了。单击页面中的“Click
Here”开关,可以看出剧本结束在用谈金红底色标出的那生机勃勃行上。那个时候用鼠标移动到有些变量上就可以显示那时这几个变量的value。突显效果如下:

图片 25

那儿JavaScript内容上方的图片 26多个开关已经变得可用了。它们分别表示“继续试行”、“单步进入”、“单步跳过”和“单步退出”。

继续推行<F8>:当通过断点来终止试行脚本时,单击<F8>就能还原实施脚本。

单步走入<F11>:允许跳到页面中的别的函数内部。

单步跳过<F10>:单击<F10>来一直跳过函数的调用即跳到return之后。

单步退出<shift+F11>:允许恢复生机脚本的施行,直到下贰个断点甘休。

单击“单步步向”开关,代码会跳到下风流倜傥行,显示效果如下:

图片 27

图片 28

从上图能够看看,当鼠标移动到“lab”变量上时,就足以展示出它的剧情是三个DOM成分,即“div#messageLabel”。

此时将右边手面板切换来“监察和控制”面板,这里列出了多少个变量,富含“this”指针的指向性以至“lab”变量。单击“+”能够观望详细的音讯。展现如下:

图片 29

2.尺码断点

在“lab.innerHTML+=arr+”<br
/>””那行代码前边的序号上单击鼠标右键,就能够现身设置标准断点的输入框。在该框内输入“arr==5”,然后回车确认,显示效果如下:

图片 30

最后单击页面的“Click
Here”开关。能够开掘,脚本在“arr==5”那些表达式为真时停下了,由此“5”以至现在的数字未有显示到页面中。下图分别是正规机能和设置了原则断点之后的突显效果相比:

图片 31图片 32

  1、使用Firebug能够找到页面中的任何内容

资源

赶快键:按<F12>能够飞速开启Firebug,倘使想得到完整的急忙键列表,能够访谈.

难点:假诺设置进度中相遇了窘迫,能够查阅Firebug的Q&A,网址为.

Firebug插件:Firebug除了本人强盛的机能之外,还只怕有基于Firebug的插件,它们用于扩张Firebug的效能。举个例子谷歌(Google卡塔尔公司费用Page
Speed插件,开垦职员能够应用它来评估他们网页的品质,并获得有关怎样校订品质的提出。Yahoo公司开支的用来检查评定页面全体性能的YSlow和用于调节和测验PHP的FirePHP。还会有用于调节和测量试验Cookie的Firecookie等。

  不清楚诸位有无碰着过那样的状态,在贰个盘根错节的HTML页面中,当您想找有些页面成分的莫过于对应的HTML时,你只好在一大堆HTML代码中去搜索,十二分劳动。有了Firebug,今后您只需求在页面中,用鼠标右键选中有些成分,然后在弹出的菜系中,选择“查看成分”,马上就会在HTML页面代码中找到该因素对应的代码了,拾分利于,如下图所示:

总结

通过本文的读书,读者能够调整Firebug的基本成效。Firebug已经稳步产生二个调度平台,而不只是八个简练的Firefox扩大插件。学好Firebug能给今后的求学和劳作提供一定的声援。

参考文献:《锋利的JQuery(第2版)》

1 赞 3 收藏 1
评论

图片 33

 

图片 34

 

  同样,也提供了更火速的主意:只须要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug调控嘉义就立时显得移动时经过的HTML成分的代码:

 

图片 35

  2、能够动用Firebug更改HTML和CSS

  通过Firebug,能够直接改良HTML,扩展HTML的质量,删除成分,扩大CSS样式及贯彻越来越多职能,如下图:

图片 36

  在上海体育场合的美食指南中得以领悟看见,你能够对HTML成分举办种种多种的订正操作,方法是先点击HTML部分的代码,然后鼠标右键就能够在弹出的菜系中开展操作。

  3、能够由此Firebug查看DOM成分和对XML进行操作

  当张开一个HTML页通过Firebug查看HTML代码时,你能够并且点在调控面板中的DOM树,就能够以DOM的树型结构格局看看整个HTML的布局。而只要你是打开了三个XML文件,那么鼠标右键点XML文件中的任何一个因素,在弹出的菜单中生机勃勃律能够接纳对XML进行连锁操作,如下图:

图片 37

  4、使用Firebug调试Javascript代码

  在Firebug调节高雄,借使要施行调节和测量检验Javascript代码,只须求首先将Script调整面版运维,然后在点击Console按键,在下拉菜单中采取显示Javascipt及HTML错误(还足以让客户筛选展现更加多的失实),接着在底层会意识出现>>>的箭头,在此边,你可以输入Javascipt代码,输入后,立时按回车键,就足以奉行了,十二分福利,如下图:

图片 38

  三个小本事是,在输入Javascipt的时候,还扶植选拔tab键的机动实现提示功能,比方对于一个十分短的Javascipt函数,在没输入完的时候假若按tab键firebug就能够推抢您活动补充完整。

5、数次加载页面后Firebug会记得加载前的职务

  无论你重新加载多少次页面,Firebug在每回加载页面后总会自身记得加载前页面所在的岗位(举例你早就在浏览页面包车型客车平底,那个时候再加载页面,则新的页面加载后,依然把你带到页面底部)。

 

6、使用$标记去便利访谈变量

  在地点的第4点中,大家提到了在>>>那一个命令行下能够展开Javascript的调度,而别的贰个技能是足以选拔如$1去做客曾经拜会过的变量中的最终二个,如此类推,能够运用$2访谈曾经拜谒过的变量中的尾数第一个。如下图:

图片 39

  7、Firebug会高亮度展现改良过的内容

  在Firebug中,只要您改改善页面中的内容,就能够以古金色高亮度呈现已经修改过的开始和结果,如下图:

图片 40

  8、监视Javascript的运作质量

  在Firebug中,你可以点调节新北的“profile(轮廓)”选项,那将拉开Firebug的属性监视功用,之后你能够展开页面包车型大巴一文山会海操作,当再一次点profile开关后,将告后生可畏段落对品质的监测活动,接着Firebug会呈现二个列表,当中会明白列明操作进程中所涉及的函数,调用次数,占用时间、平均时间,最小时间,最大日子等,如下图所示:

图片 41
▲(点击图片查看大图卡塔 尔(阿拉伯语:قطر‎

9、Firebug强盛的网络数据监视成效

  Firebug还提供了丰盛效率强盛的互连网数据监作用。开辟者在开垦web应用时,通常要察看各样HTTP央浼和回应,在此上头Firebug的功力十一分有力。首先,只要求开启调节面板中的网络成效,然后在每一回运维页面时,都能够理解见到各种HTTP的倡议和HTTP回应的现实细节。如下图:

图片 42
▲(点击查阅大图卡塔 尔(阿拉伯语:قطر‎

  在上海体育场合中,只要点每二个需要旁边的+号,就足以见到该诉求的现实细节,如下图:

图片 43

  能够见到,能观望HTTP的尾部的各类新闻。相仿,假诺要看这两天页面中的举例图片,FLASH等因素的新闻等,也得以通过上海教室去点区别的选项卡去筛选查看,十三分有利。

  10、使用Firebug的Log功能

  在两全页面时,平常要记录下页面包车型客车片段新闻,那时候,能够行使Firebug中的log日志作用,把某些消息输出到firebug的调控台南,那样就方便调节和测验了。Firebug提供了几个console对象,在插件加载的时候就注册到Javascript的运维遇到中去了,能够在前后相继中向来动用。console对象提供了一个log方法,比如表明如下:

图片 44<script language=”javascript” type=”text/javascript”> 
图片 45 console.log(‘This is log
message’);  
图片 46 console.debug(‘This is debug
message’);  
图片 47  console.error(‘This is error
message’);  
图片 48  console.info(‘This is info
message’); 
图片 49 console.warn(‘This is warning
message’);  
图片 50</script>

   在Firefox中实施如下代码,拜谒到Firebug的调节台中现身如下新闻:

图片 51

  能够看出,各种级其他日志输出,都满含二个多彩的Logo,能给客商很鲜明的晋升。同有的时候间,console.log
还扶助格式化字符串的输出,你能够用相像C语言中printf的语法来调用那一个函数:console.log(“%s
is %d years old.”, “鲍勃”, 42)。

  11、能够在Firebug中调节和测验程序

  在Firebug调整台的的Javascript调控面板中,可以对页面中的Javascript进行调治,方法很简短,只须求在要调治的行的侧面单击,就能产出断点了,之后请牢记下边常件的飞速键:

  (1)  F10 步向下大器晚成行;
(2)  F8无冕调节和测量试验;
(3)  F11进去Javascript中的函数体调节和测量试验;
(4)  Shift+F11跳出函数体。

图片 52

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

  在Firebug中,还可以安装带条件剖断的断点,如下图:

图片 53

  总结

  Firefox搭配Firebug在web程序设计中,可谓是“双剑合壁”,功用强大,本文只是筛选了此中的大器晚成都部队分能力予以介绍,越来越多的请参见Firebug官网的介绍。

相关文章