调试器开发中的12个技巧,10分钟学会前端调试利
分类:前端技术

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

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

初稿出处: 惟吾德馨(@阿伦_Bryant)   

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

什么是Firebug
从事了数年的Web开垦职业,更加的认为以往对WEB开辟有了越来越高的须要。要写出完美的HTML代码;要编写制定精致的CSS样式表展现种种页面模块;要调整javascript给页面扩展部分更活跃的要素;要利用Ajax给客户带来更加好的心得。二个绝妙的WEB开荒人士必要兼顾越来越多层面,才干交出一份同样出色的学业。为支持广大正处在Web2.0洪流中的开辟职员,在那边为大家介绍一款轻松灵活的增加援救开采工具。

概述

  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开采者

Firebug是Firefox下的一款开拓类插件,现属于Firefox的一级强力推荐插件之一。它集HTML查看和编辑、 Javascript调整台、互联网情况监视器于一体,是付出JavaScript、CSS、HTML和Ajax的得力帮手。Firebug就像是一把精巧的瑞士联邦军刀,从各种分裂的角度分析Web页面内部的细节层面,给Web开荒者带来相当大的福利。那是一款令人喜好的插件,倘诺你从前从未接触过它,大概在阅读本文之后,会有一试的欲念。我在作文此文的时候,正逢Firebug公布1.0专门的学业版,那不可能不说是种巧合。

主面板

设置到位之后,在Firefox浏览器的地方后方就能够有一个小虫子的图标图片 2。单击该Logo后就可以开展Firebug的调节台,也足以经过快速键<F12>来开荒调控台。使用Ctrl F12飞速键能够使Firebug独立展开三个窗口而不占用Firefox页面尾部的空间。

图片 3

从上海体育场地中可以看到,Firebug富含7个面板:

垄断(monopoly)台面板:用于记录日志、概览、错误提醒和实践命令行,相同的时候也用于Ajax的调节和测量试验;

HTML面板:用于查看HTML元素,能够实时地编辑HTML和转移CSS样式,它饱含3个子面板,分别是体制、布局和DOM面板;

CSS面板:用于查看全数页面上的CSS文件,能够动态地修改CSS样式,由于HTML面板中早就包罗了三个CSS面板,由此该面板将非常少用到;

本子面板:用于彰显Javascript文件及其所在的页面,也得以用来彰显Javascript的Debug调节和测验,包罗3个子面板,分别是监督、仓库和断点;

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

互联网面板:用于监视互连网活动,能够帮衬查看八个页面包车型大巴载入情况,包罗文件下载所占领的时日和文书下载出错等音信,也得以用于监视Ajax行为;

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


 

 

应用
Firebug插件尽管功效庞大,不过它早就和Firefox浏览器无缝地整合在一起,使用轻易直观。如果您忧虑它会攻陷太多的系统财富,也得以实惠地启用/关闭那一个插件,以致针对一定的站点开启那么些插件。

  调控台面板

1.决定台面板大概浏览

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

2.笔录日志

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

console.log:轻松的笔录日志;

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

console.error:在音信前体现错误Logo,并且附上行号的超链接;

console.info:在信息前体现新闻Logo,而且附上行号的超链接;

console.warn:在纤弱钱显示警告图标,而且附行号的超链接。

在空白的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

“清除”用于破除调整台北的内容。“保持”则是把调整高雄的内容保留,就算刷新了照旧还留存。“全体”则是展现任何的新闻。前边的“错误”、“警告”、“音信”、“调节和测量试验音信”、“库克ies”菜单则是对持有开展了一个分拣。

“轮廓”菜单用于查看函数的习性。下边通过四个事例来演示,代码如下:

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<1000;i ) for(var j=0;j<一千;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.第多少个标签用于查看传递给服务器的参数;首个标签用于查看响应头新闻和伸手头音信;第八个标签用于查看服务器再次回到的剧情;第多少个标签则是翻开服务器再次来到的HTML结构;第三个标签用于查占星应的库克ies。

图片 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插件实行普通的调节和测验工作。本文采用了10个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出去的参数、 U奥迪Q7L,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、数次加载页面后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.”, “Bob”, 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官方网站的牵线。

本文由pc28.am发布于前端技术,转载请注明出处:调试器开发中的12个技巧,10分钟学会前端调试利

上一篇:浅析产生,Chrome开辟者工具不完全指南 下一篇:没有了
猜你喜欢
热门排行
精彩图文