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

十二分钟学会前端调节和测试利器——FireBug

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

初稿出处:
惟吾德馨(@Allen_Bryant)   

概述

  FireBug是多少个用以网址前端开拓的工具,它是FireFox浏览器的一个扩张插件。它能够用来调节和测试JavaScript、查看DOM、分析CSS、监察和控制网络流量以及进行Ajax交互等。它提供了大约前端开拓需要的整套效果。官方网站:www.getfirebug.com

怎么着得到Firebug?

因为它是Firefox浏览器的3个扩大插件,所以首先须要下载Firefox浏览器。读者能够访问www.mozilla.com下载并安装Firefox浏览器。安装完结后用它访问

跻身下图所示页面。点击”加多到Firefox”,然后点击”霎时安装”,最终重复启航Firefox浏览器就能够达成安装。

金沙网址 1

金沙网址,主面板

设置到位之后,在Firefox浏览器的地方后方就会有一个小虫子的Logo金沙网址 2。单击该Logo后就可以开始展览Firebug的调整台,也能够通过连忙键<F1贰>来展开调整台。使用Ctrl+F1二急忙键可以使Firebug独立打开叁个窗口而不占用Firefox页面尾部的长空。

金沙网址 3

从上海教室中得以看到,Firebug蕴含捌个面板:

支配台面板:用于记录日志、大概浏览、错误提醒和实践命令行,同时也用于Ajax的调试;

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

CSS面板:用于查看全部页面上的CSS文件,能够动态地修改CSS样式,由于HTML面板中早已包括了贰个CSS面板,由此该面板将很少用到;

本子面板:用于突显Javascript文件及其所在的页面,也足以用来展现Javascript的Debug调节和测试,包罗叁个子面板,分别是监督、货仓和断点;

DOM面板:用于呈现页面上的富有目的;

网络面板:用于监视网络活动,能够援协助调查看一个页面包车型大巴载入意况,包含文件下载所占用的年月和文件下载出错等新闻,也能够用来监视Ajax行为;

Cookies面板:用于查看和调度cookie(必要安装下文能源中所提到的Firecookie)。


 

  调整台面板

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

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

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

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

本条功效看似于C语言中的语法,能够在console记录日志的方法里使用。

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

并且,那多少个函数帮衬三个变量。代码如下:

JavaScript

<script type=”text/javascript”> var
kid=”孩子”,count=”3″,man=”Allen”; var
sport一=”篮球”,sport二=”羽毛球”,sport3=”网球”;
console.log(“%d个%s在玩游戏”,count,kid);
console.log(count,”个”,kid,”在玩游戏”);
console.log(“%s擅长的移动有:”,man,sport一,sport2,sport三);
</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轮廓等。越多材质能够访问.

肆.面板内的子菜单

支配台面板内有1排子菜单,分别是祛除、保持、概略、全部等。

金沙网址 6

“清除”用于破除调控罗利的内容。“保持”则是把调控纽伦堡的内容保留,纵然刷新了一如既往还设有。“整体”则是呈现全数的信息。前面包车型大巴“错误”、“警告”、“新闻”、“调节和测试消息”、“Cookies”菜单则是对具有开始展览了一个分拣。

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

JavaScript

<button type=”button” id=”btn壹”>实施循环一</button>
<button type=”button” id=”btn二”>试行循环贰</button>
<button type=”button” id=”btn三”>实行循环叁</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<1000;j++); }
document.getElementById(“btn1”).onclick=f一;
document.getElementById(“btn贰”).onclick=f二;
document.getElementById(“btn三”).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”、“推行循环叁”四个按钮各一回,仁同一视新单击“轮廓菜单”,就能够看出如下图所示结果:

金沙网址 9

能够看来Firebug展现出了尤其详尽的告诉。包含各个函数的函数名、调用次数、占用时间的百分比、占用时间、时间、平均时间、最小时间、最大日子以及所在的公文的行数等音讯。

5.Ajax调试

垄断台面板也可用于Ajax调试,在早晚水准上能够代替网络面板。比如笔者张开1个页面,可以在Firebug调整台看到此次Ajax的Http请求头音讯和服务器响应头消息。如下图,它会来得出此次使用的Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最入眼的是有七个标签,即参数、头消息、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数;第三个标签用于查看响应头新闻和请求头消息;第伍个标签用于查看服务器重回的内容;第多少个标签则是查看服务器再次回到的HTML结构;第四个标签用于查占星应的Cookies。

金沙网址 10

比如看不到任何新闻的面世,或者是将此功用关闭了,可以单击“调整台”旁边的下拉箭头,将“呈现XMLHttpRequests”前边的勾勾选上就能够。

金沙网址 11

HTML面板

一.查看和更换HTML代码

Html面板的兵不血刃之处便是能查看和退换HTML代码,而且那一个代码都是通过格式化的。下边以自己的2个浏览器主页来做教师。

金沙网址 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”按键后,用鼠标在网页上入选3个因素时,成分会被叁个杏黄的范畴住,同时下边包车型大巴HTML面板中相应的HTML树也会举办并且高亮呈现。再一次单击后就可以退出该方式,并且后面部分的HTML树也维持在那个场馆。通过那个作用,能够快捷搜索页面内的因素,调节和测试和探寻相应代码卓殊便宜。刷新网页后,页面显示的依然是用Inspect选中的区域。

HTML面板下方的“编辑”开关能够用来直接编辑选中的HTML代码,而前边展现的是最近因素在全体DOM中的结构路线。

叁.查看DOM中被剧本改造的部分

通过JavaScript来改造样式属性的值能够成功部分动画片效果。张开页面后,利用查看(Inspect)功效来抉择相应的HTML代码,举个例子,选中“要闻”,如下图所示:

金沙网址 16

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

金沙网址 17

由此上航海用体育场所能够见见,HTML查看器会将页面上更改的内容页记录下来,并以海蓝高亮代表。有了那一个作用,网页的潜规则将干净形成历史。大家得以采用该意义查看其余网址的动画片效果是哪些兑现的。

4.翻看和改产生分的体制

在右侧的样式面板中,体现了此成分当前享有的体制。全体的体制都足以实时地剥夺和修改,如下图所示,通过在”text-align:center”前单击会冒出禁止使用的标识,那样就能够禁止使用此规则。通过一贯在体制value值上单击就能够修改。

金沙网址 18

单击“布局”面板就可以看到此因素具体的布局属性,那是五个行业内部的盒模型。通过“布局”面板,能够很轻便地来看成分的偏移量、外边距、边框、内边距和因素的可观、宽度等音讯,如下图所示:

金沙网址 19

5.查看DOM的信息

单击“DOM”面板后方可观望此因素的详尽的DOM新闻以及函数和事件,如下图所示:金沙网址 20

CSS、DOM和互连网面板

这二个面板绝对于前方二个面板相比次要,CSS和DOM面板与HTML面板中右边的面板功用相似,但比不上HTML面板灵活,因此一般采纳得很少。

CSS面板特有的2个作用正是能够分别详细查看页面中内嵌以及动态导入的样式。如下图所示:

金沙网址 21

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

而在互联网面板中,绝对有1部分强劲的效率,举例张开有些网址首页,Firebug呈现效果如下图所示:

金沙网址 22

该页面可以监视每壹项成分的加载意况,包涵剧本,图片等的尺寸以及加载用时等,对于页面优化有着极其主要的含义。

其余,顶部还可以分类查看成分的HTML、CSS、JS等的加载情形,使分析更灵活。

  脚本面板

剧本面板不仅能够查看页面内的脚本,而且还有庞大的调试功用。

在剧本面板的右手有“监察和控制”、“货仓”和“断点”多个面板,利用Firebug提供的安装断掉的机能,能够很方便地调节和测试程序,如下图所示:

金沙网址 23

一.静态断点

诸如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代码,能够在此处安装断点。例如在第陆行那句代码前边单击一下,那它前边就会油但是生三个水晶色的圆点,表示此处已经被设置了断点。此时,在右边断点面板的断点列表中就涌出了刚刚设置的断点。如果想权且禁止使用某些断点,可以在断点列表中去掉有个别断点的前头的复选框中的勾,那么此时左手面板中相应的断点就从红深紫灰产生了红苹果普鲁士蓝了。

金沙网址 24

安装完断点之后,我们就足以调节和测试程序了。单击页面中的“Click
Here”开关,能够看出剧本甘休在用谈白色底色标出的那壹行上。此时用鼠标移动到有些变量上就能够展现此时这几个变量的value。呈现效果如下:

金沙网址 25

那时JavaScript内容上方的金沙网址 26多少个开关已经变得可用了。它们分别表示“继续实践”、“单步进入”、“单步跳过”和“单步退出”。

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

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

单步跳过<F十>:单击<F拾>来平昔跳过函数的调用即跳到return之后。

单步退出<shift+F1一>:允许复苏脚本的实施,直到下二个断点结束。

单击“单步进入”按键,代码会跳到下1行,呈现效果如下:

金沙网址 27

金沙网址 28

从上海体育地方能够见见,当鼠标移动到“lab”变量上时,就能够显得出它的始末是三个DOM成分,即“div#messageLabel”。

此刻将右手面板切换成“监察和控制”面板,这里列出了多少个变量,包涵“this”指针的针对以及“lab”变量。单击“+”能够看出详细的音信。呈现如下:

金沙网址 29

贰.条件断点

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

金沙网址 30

最终单击页面包车型大巴“Click
Here”开关。能够发掘,脚本在“arr==伍”那个表明式为真时停下了,由此“5”以及未来的数字未有显获得页面中。下图分别是常规职能和设置了典型化断点之后的来得效果比较:

金沙网址 31金沙网址 32

资源

飞快键:按<F1二>能够快捷开启Firebug,假如想获得完整的快速键列表,能够访问.

主题素材:若是设置进程中相遇了狼狈,能够查阅Firebug的Q&A,网站为.

Firebug插件:Firebug除了自己壮大的效果之外,还有基于Firebug的插件,它们用于扩充Firebug的效应。举个例子Google公司开销Page
Speed插件,开荒职员能够运用它来评估他们网页的天性,并赢得有关怎么着革新质量的提出。Yahoo集团支付的用来检查测试页面全体品质的YSlow和用于调节和测试PHP的FirePHP。还有用于调节和测试Cookie的Firecookie等。

总结

因而本文的上学,读者能够调节Firebug的基本成效。Firebug已经稳步产生3个调解平台,而不只是3个轻巧的Firefox扩张插件。学好Firebug能给将来的读书和做事提供一定的帮衬。

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

1 赞 3 收藏 1
评论

金沙网址 33

相关文章