10分钟学会前端调节和测量试验利器,firefox插件Firebug的应用教程

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

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

原来的文章出处:
惟吾德馨(@Allen_Bryant)   

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

什么是Firebug
致力了数年的Web开采职业,越来越感觉以往对WEB开拓有了更加高的渴求。要写出完美的HTML代码;要编写制定精致的CSS样式表体现各样页面模块;要调节javascript给页面扩展一些更活泼的因素;要利用Ajax给顾客带来越来越好的体会。二个优秀的WEB开采人士须求照管更加多层面,本领交出一份一样美貌的功课。为援救周围正处在Web2.0洪流中的开发人士,在那间为大家介绍一款轻便灵活的帮带开拓工具。

概述

  FireBug是一个用于网址前端开荒的工具,它是Fire福克斯浏览器的多个恢弘插件。它能够用于调节和测量检验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开拓者

Firebug是Firefox下的一款开辟类插件,现属于Firefox的头等强力推荐插件之一。它集HTML查看和编辑、
Javascript调整台、互联网情况监视器于一体,是支付JavaScript、CSS、HTML和Ajax的得力帮手。Firebug仿佛一把精巧的瑞士联邦军刀,从各样差异的角度剖析Web页面内部的细节层面,给Web开拓者带来相当的大的惠及。那是一款令人喜好的插件,就算您在此此前尚未接触过它,或然在翻阅本文之后,会有一试的欲念。作者在编写此文的时候,正逢Firebug揭橥1.0正经版,那无法不说是种巧合。

主面板

安装实现之后,在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)。


 

 

应用
Firebug插件尽管功用强大,不过它已经和Firefox浏览器无缝地组合在联合,使用简便直观。假如你牵挂它会占领太多的系统能源,也得以一本万利地启用/关闭那几个插件,以至针对特定的站点开启那些插件。

  调节台面板

1.决定台面板大概浏览

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

10分钟学会前端调节和测量试验利器,firefox插件Firebug的应用教程。2.记录日志

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

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

console.debug:记录调节和测量试验音信,何况附上行号的超链接;

console.error:在音讯前呈现错误图标,並且附上行号的超链接;

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<一千;i++) for(var j=0;j<一千;j++); } function f2(){ for(var i
=0;i<一千;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<一千;i++) for(var j=0;j<一千;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调试

垄断(monopoly)台面板也可用来Ajax调试,在明确水平上得以代表互联网面板。举个例子作者张开三个页面,能够在Firebug调节台看见此次Ajax的Http央浼头新闻和服务器响应头音讯。如下图,它博览会示出本次使用的Ajax的GET方法、地址、耗费时间乃至调用Ajax需要的代码行数。最要害的是有5个标签,即参数、头新闻、响应、HTML、Cookies.第叁个标签用于查看传递给服务器的参数;第二个标签用于查看响应头新闻和伸手头信息;第多个标签用于查看服务器再次回到的内容;第八个标签则是翻开服务器重返的HTML结构;第八个标签用于查占星应的Cookies。

澳门葡京 10

若是看不到任何音讯的产出,恐怕是将此功效关闭了,能够单击“调节台”旁边的下拉箭头,将“展现XMLHttpRequests”前边的勾勾选上就能够。

澳门葡京 11

   

在安装好插件之后,先用Firefox浏览器张开须要测量检验的页面,然后点击右下方的威尼斯绿开关或行使急速键F12唤出Firebug插件,它会将方今页面分成上下三个框架,如图1所示。

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

 

图1:Firebug插件展开图示

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的初级应用技艺,介绍给我们。

澳门葡京 23

  脚本面板

本子面板不仅能够查阅页面内的脚本,何况还会有强盛的调节和测量试验功效。

在剧本面板的左侧有“监察和控制”、“货仓”和“断点”八个面板,利用Firebug提供的装置断掉的效能,能够很便利地调试程序,如下图所示:

澳门葡京 24

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行那句代码前面单击一下,这它前面就能够出现贰个深紫的圆点,表示此处已经被设置了断点。此时,在左侧断点面板的断点列表中就应际而生了刚刚设置的断点。假诺想有的时候禁止使用某些断点,能够在断点列表中去掉有个别断点的前方的复选框中的勾,那么此时左臂面板中相应的断点就从红淡褐形成了铁锈棕黄色了。

澳门葡京 25

安装完断点之后,大家就能够调节和测量检验程序了。单击页面中的“Click
Here”按键,能够看来剧本停止在用谈金黄底色标出的那一行上。此时用鼠标移动到某些变量上就可以展现此时那一个变量的value。展现效果如下:

澳门葡京 26

这儿JavaScript内容上方的澳门葡京 27几个按键已经变得可用了。它们各自代表“继续实行”、“单步步向”、“单步跳过”和“单步退出”。

继续施行<F8>:当通过断点来终止施行脚本时,单击<F8>就可以借尸还魂实施脚本。

单步步向<F11>:允许跳到页面中的其余函数内部。

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

单步退出<shift+F11>:允许苏醒脚本的施行,直到下贰个断点结束。

单击“单步步向”开关,代码会跳到下一行,展现效果如下:

澳门葡京 28

澳门葡京 29

从上海体育场地能够看看,当鼠标移动到“lab”变量上时,就能够展现出它的剧情是叁个DOM成分,即“div#messageLabel”。

此时将右左侧板切换来“监察和控制”面板,这里列出了多少个变量,包蕴“this”指针的针对以致“lab”变量。单击“+”能够观察详细的新闻。呈现如下:

澳门葡京 30

2.尺码断点

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

澳门葡京 31

终极单击页面包车型地铁“Click
Here”开关。能够开采,脚本在“arr==5”那个表明式为真时停下了,因而“5”以致后来的数字未有呈现到页面中。下图分别是健康职能和装置了条件断点之后的显示效果相比较:

澳门葡京 32澳门葡京 33

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

从图第11中学看看,Firebug有6个关键的Tab开关,下文将根本介绍介绍这几地方的作用。
Console HTML CSS Script Dom Net
垄断台 Html查看器 Css查看器 脚本条时代 Dom查看器 网络景况监视

资源

急迅键:按<F12>可以长足开启Firebug,倘诺想博得完整的急迅键列表,能够访谈.

主题素材:假诺设置进程中相见了繁多不便,可以查阅Firebug的Q&A,网站为.

Firebug插件:Firebug除了本身强盛的效能之外,还会有基于Firebug的插件,它们用于扩张Firebug的职能。例如谷歌公司开垦Page
Speed插件,开垦人士能够动用它来评估他们网页的性质,并得到有关怎么着革新性能的提出。Yahoo公司费用的用于检验页面全部品质的YSlow和用来调节和测量试验PHP的FirePHP。还应该有用于调节和测验Cookie的Firecookie等。

  不明白诸位有无蒙受过那样的场馆,在贰个长短不一的HTML页面中,当您想找某些页面成分的骨子里对应的HTML时,你不得不在一大堆HTML代码中去探求,拾分劳神。有了Firebug,今后您只要求在页面中,用鼠标右键选中有个别成分,然后在弹出的菜谱中,选取“查看成分”,霎时就能在HTML页面代码中找到该因素对应的代码了,十三分方便,如下图所示:

Console 控制台
调节台能够展现当前页面中的javascript错误以致警示,并提示出错的文件和行号,方便调节和测量试验,那几个不当提醒比起浏览器本人提供的谬误提醒特别详细且具有参照他事他说加以考察价值。何况在调节和测量试验Ajax应用的时候也是特意有用,你可见在调控台里看看每二个XMLHttpRequests要求post出去的参数、
UPAJEROL,http头以致回馈的从头到尾的经过,原来仿佛在悄悄黑匣子里运转的顺序被明晰地彰显在你前边。

总结

通过本文的上学,读者能够调节Firebug的基本效率。Firebug已经逐步变为三个调解平台,而不止是三个轻松的Firefox扩充插件。学好Firebug能给将来的求学和劳作提供一定的声援。

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

1 赞 3 收藏 1
评论

澳门葡京 34

 

象C shell或Python
shell同样,你还可以够在调整台南查阅变量内容,直接运营javascript语句,就算是大段的javascript程序也能够科学生运动转并获得运转期的新闻。

澳门葡京 35

支配台还应该有个重大的机能正是翻开脚本的log,
以前您也许习贯了利用alert来打字与印刷变量,不过Firebug给大家带来了二个新对象
—— console.log, 最简便易行的打字与印刷日志的语法是如此的:

 

console.log(”hello world”)

  同样,也提供了更快速的法子:只必要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug调节高雄就应声显得移动时通过的HTML成分的代码:

假如您有一群参数供给整合在联合输出,能够写成那样:

 

console.log(2,4,6,8,”foo”,bar).

澳门葡京 36

Firebug的日记输出有多样可选的格式乃至语法,乃至足以定制彩色输出,比起单调的alert,明显尤其有利,限于篇幅,这里不做详细表达,不过有志于进步debug功效的读者,可以到Firebug的官方站点(见附录)查看更详实的课程。

  2、可以接纳Firebug修改HTML和CSS

图2: 在支配台里调节和测量试验javascript

  通过Firebug,能够一向改造HTML,增添HTML的个性,删除成分,扩充CSS样式及实现愈来愈多职能,如下图:

澳门葡京 37

澳门葡京 38

查阅和修改HTML
率先次看见Firebug强盛的HTML代码查看器,就以为它独特,比较于Firefox自带的HTML查看器,它的成效强盛了众多。
HTML

  在上海体育场合的菜系中能够领略看出,你能够对HTML成分举办各种三种的修改操作,方法是先点击HTML部分的代码,然后鼠标右键就能够在弹出的美食指南中伸开操作。

先是你看看的是早就因而格式化的HTML代码,它有明晰的档次,你可以预知有助于地辨认出每三个标签之间的附属并行关系,标签的折叠功效能够帮衬您聚集精力解析代码。源代码上方还标识出了DOM的层系,如图3所示,它领会地列出了三个hml成分的parent、child以至root成分,同盟Firebug自带的CSS查看器使用,会给div+css页面解析编写带来十分的大的利润。你还足以在HTML查看器中央机关单位接修改HTML源代码,并在浏览器中第不时间见到修改后的功能,光凭这点就能够让多数页面设计师至死不渝地变成Firebug的观者了。

  3、能够透过Firebug查看DOM成分和对XML举行操作

神蹟页面中的javascript会依赖客商的动作如鼠标的onmouseover来动态改换部分HTML元素的样式表或背景观,HTML查看器会将页面上转移的开始和结果也抓下来,并以彩虹色色高棉亮标识,让网页的潜规则深透成为历史。

  当展开二个HTML页通过Firebug查看HTML代码时,你能够何况点在调整面板中的DOM树,就能够以DOM的树型结构情势来看全部HTML的布局。而一旦您是张开了三个XML文件,那么鼠标右键点XML文件中的任何一个要素,在弹出的菜系中一样可以挑选对XML举办相关操作,如下图:

采纳Inspect检查功用,大家还足以用鼠标在页面中直接选取部分区块,查六柱预测应的HTML源代码和CSS样式表,真正的做到所见即所得,要是您使用了表面编辑器修改了这段时间网页,能够点击Firebug的reload图片重新载入网页,它会延续追踪你在此之前用Inspect选中的区块,方便调节和测量试验。

澳门葡京 39

图3::HTML查看器

  4、使用Firebug调试Javascript代码

澳门葡京 40

  在Firebug调整新北,倘若要实践调试Javascript代码,只须求首先将Script调节面版运转,然后在点击Console开关,在下拉菜单中甄选突显Javascipt及HTML错误(还足以让客户挑选展现越来越多的不当),接着在尾巴部分会发觉出现>>>的箭头,在那间,你能够输入Javascipt代码,输入后,马上按回车键,就可以实行了,十一分有利,如下图:

CSS调试
Firebug的CSS调节和测验器是专为网页设计员们量身定做的。

澳门葡京 41

近期的网页设计言必称div+css,假设你是用table套出来的HTML页面,就得按那规矩重构二回,不然显得你相当不够风尚!用div做出来的页面包车型客车确能轻易HTML代码,HTML标签减腹的结果正是CSS样式表的编写成了页面制作的关键性。Firebug的CSS查看器不唯有自下向上列出每四个CSS样式表的依附承接关系,还列出了每二个体制在哪些样式文件中定义。你能够在此个查看器中一直抬高、修改、删除一些CSS样式表属性,并在如今页面中一向看出修改后的结果。

  二个小本事是,在输入Javascipt的时候,还协理接纳tab键的自发性实现提示成效,举个例子对于三个非常短的Javascipt函数,在没输入完的时候要是按tab键firebug就能援助您活动补充完整。

三个第一名的施用便是页面中的三个区块地点显得有一点点不太符合,它供给活动多少个象素。那时候用CSS调节和测量检验工具得以Infiniti制编辑它的地点——你能够依据需求自由活动象素。
如图4中正在修改贰个区块的背景观。

5、数12回加载页面后Firebug会记得加载前的义务

提示:假如你正在攻读CSS样式表的接纳,不过总记不住常用的样式表有啥值,能够品味在CSS调节和测量试验器中当选多个样式表属性,然后用前后方向键来改动它的值,它会把大概的值二个个遍历给你看。

  无论你重新加载多少次页面,Firebug在历次加载页面后总会本身记得加载前页面所在的任务(比方您以往在浏览页面的平底,此时再加载页面,则新的页面加载后,依旧把你带到页面尾部)。

图4: CSS查看器,能够直接修改样式表

 

澳门葡京 42

6、使用$标识去便利访问变量

可视化的CSS尺标
咱俩得以选取Firebug来查看页面中某一区块的CSS样式表,如果更加的进展侧面Layout
tab的话,它会以标尺的样式将近日区块占用的面积清楚地方统一标准识出来,精确到象素,更令人惊讶的是,你能够在此个可视化的分界面中央政府机关接修改各象素的值,页面上区块的岗位就能随改造而变化。在页面中一些因素出现错位只怕面积当先预料值时,该意义能够提供立竿见影的声援,你能够籍此深入分析offset、margin、
padding、size之间的涉嫌,进而找寻消除难点的章程。

  在上面包车型客车第4点中,大家提到了在>>>这么些命令行下能够扩充Javascript的调护医疗,而别的多少个才具是足以应用如$1去拜望曾经会见过的变量中的最终贰个,如此类推,能够运用$2访谈曾经会见过的变量中的尾数第一个。如下图:

图5:Firebug中的CSS标尺

澳门葡京 43

澳门葡京 44

  7、Firebug会高亮度展现修改过的开始和结果

网络情形监视器

或许有一天,你的小业主照旧客商找到您,抱怨你制作的网页速度奇慢,你该怎么着回应?你或许会说这也许是网络难点,或许是计算机配置难点,或然是前后相继太慢,大概直说是她们的人品难题?不管怎么说,最后你或者被供给去化解那些有各类也许的主题素材。

互连网境况监视器能帮你消除那么些劳顿难题。Firebug的互连网监视器同样是成效强盛的,它能将页面中的CSS、javascript以致网页中引用的图片载入所消耗的大运以矩状图表现出来,大概在这里处您能一把揪出拖慢了你的网页的祸首,进而对网页进行调优,最终业主满意顾客爱怜,你的饭碗也因而而牢不可破。

网络监视器还有部分其他细节效能,比如预览图片,查看每二个外表文件乃至是xmlHttpRequests央浼的http头等等。

图6:网络情形监视器
澳门葡京 45

  在Firebug中,只要你改改过页面中的内容,就能够以色情高亮度展现已经修改过的剧情,如下图:

Javascript调试器

那是三个很准确的javascript脚本调节和测量试验器,占用空间十分小,不过单步调节和测验、设置断点、变量查看窗口贰个居多。正所谓麻雀虽小,五脏俱全。

假若你有三个网址已经济建造成,然则它的javascript有品质上的标题要么不是太全面,能够经过面板上的Profile来总括每段脚本运转的时刻,查看毕竟是哪些语句施行时间过长,一步步解除难点。

图7:javascript调试器
澳门葡京 46

澳门葡京 47

DOM查看器

DOM(Document Object
Model)里头富含了多量的Object乃至函数、事件,在从前,你要想从当中查到须要的内容,绝非易事,那好比你去了二个巨人的体育地方,想要找到几本名字不太对劲的小书,众多的选择会让您方寸已乱。而使用Firebug的DOM查看器却能造福地浏览DOM的内部结构,扶植你快捷稳定DOM对象。双击一个DOM对象,就能够编辑它的变量或值,编辑的同期,你大概会发觉它还应该有自动完结效能,当您输入document.get之后,按下tab键就能够补齐为
document.getElementById,非常方便。要是您感到补齐得非常不够理想,按下shift+tab又会恢复生机原状。用了Firebug的
DOM查看器,你的javascript从此找到了促使的指标,Web开辟恐怕就成了一件乐事。

图8: Dom查看器
澳门葡京 48

  8、监视Javascript的运作质量

小结

Firebug插件提供了一站式web开荒所不可缺少的工具。从HTML的编写,到CSS样式表的夸口调优,以致用javascript脚本开垦,亦可能Ajax应用,Firebug插件都会化为你的得力帮手。所谓工欲善其事,必先利其器。在Web2.0的一代,言必称Ajax,动辄正是客商体验升高,假使把Firebug工具用好,必能让您锦上添花,将HTML、CSS、javascript整理得服服帖帖,从此成为web开发中的行家级人物。

  在Firebug中,你能够点调节台南的“profile(概略)”选项,那将开启Firebug的习性监视作用,之后你能够开展页面包车型地铁一文山会海操作,当再次点profile开关后,将告一段落对质量的监测活动,接着Firebug会突显三个列表,在那之中会明白列明操作进程中所涉及的函数,调用次数,占用时间、平均时间,最时辰间,最大日子等,如下图所示:

你只怕感兴趣的小说:

  • 使用firebug进行调节和测验javascript的身体力行
  • Jquery使用Firefox
    FireBug插件调节和测量检验Ajax步骤讲授
  • javascript
    在firebug调节和测量试验时用console.log的法子
  • firebug的三个有意思现象介绍
  • 应用Firebug对js进行断点调节和测量检验的图像和文字方法
  • 动用JavaScript检查实验Firefox浏览器是还是不是启用了Firebug的代码
  • Firebug入门指南(Firefox浏览器)
  • firefox firebug汉语入门教程
    脚本之家新禧专程版
  • Firefox+FireBug使JQuery的就学更是轻便喜悦
  • Firebug
    字幕文件JSON地址获代替码
  • Javascript 调节和测量检验利器
    Firebug使用详解六
  • 神威无比的WEB开垦好帮手FireBug(Firefox
    Plugin)
  • js之WEB开辟调节和测量试验利器:Firebug
    下载
  • FireBug 调节和测量试验JS入门教程
    如何调整JS

澳门葡京 49
▲(点击图片查看大图)

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

  Firebug还提供了丰盛效用强盛的网络数据监成效。开荒者在支付web应用时,常常要重点种种HTTP央求和答复,在此下面Firebug的效果格外刚劲。首先,只要求开启调控面板中的互连网效能,然后在历次运转页面时,都足以知晓看出种种HTTP的伸手和HTTP回应的具体细节。如下图:

澳门葡京 50
▲(点击查看大图)

  在上海体育场面中,只要点每一个伸手旁边的+号,就可以看出该央浼的现实细节,如下图:

澳门葡京 51

  能够看来,能看出HTTP的尾部的种种新闻。同样,假设要看如今页面中的比方图片,FLASH等要素的新闻等,也足以经过上海教室去点不一样的选项卡去筛选查看,十分平价。

  10、使用Firebug的Log功能

澳门葡京 ,  在统一盘算页面时,平时要记录下页面包车型大巴有的新闻,今年,能够运用Firebug中的log日志效率,把有个别新闻输出到firebug的调节新北,那样就方便调节和测量检验了。Firebug提供了三个console对象,在插件加载的时候就报了名到Javascript的运作条件中去了,能够在程序中央机关单位接行使。console对象提供了三个log方法,譬如表明如下:

澳门葡京 52<script language=”javascript” type=”text/javascript”> 
澳门葡京 53 console.log(‘This is log
message’);  
澳门葡京 54 console.debug(‘This is debug
message’);  
澳门葡京 55  console.error(‘This is error
message’);  
澳门葡京 56  console.info(‘This is info
message’); 
澳门葡京 57 console.warn(‘This is warning
message’);  
澳门葡京 58</script>

   在Firefox中实行如下代码,会看出Firebug的调整桃园出现如下新闻:

澳门葡京 59

  能够见到,各样级其余日志输出,都包括二个五花八门的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跳出函数体。

澳门葡京 60

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

  在Firebug中,还足以安装带条件判定的断点,如下图:

澳门葡京 61

  总结

  Firefox搭配Firebug在web程序设计中,可谓是“双剑合壁”,作用壮大,本文只是选取了中间的一对技巧予以介绍,越多的请参见Firebug官方网站的介绍。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website