云顶集团官网手机版-云顶集团网站

热门关键词: 云顶集团官网手机版,云顶集团网站
10分钟学会前端调节和测量试验利器云顶集团网站
分类:web前端

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

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

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

概述

  FireBug是一个用来网址前端开垦的工具,它是FireFox浏览器的三个扩大插件。它能够用来调节和测验JavaScript、查看DOM、深入分析CSS、监察和控制互连网流量甚至开展Ajax交互等。它提供了差不离前端开垦须求的整整效率。官方网站:www.getfirebug.com

怎么样获得Firebug?

因为它是Firefox浏览器的一个扩充插件,所以首先必要下载Firefox浏览器。读者能够访谈www.mozilla.com下载并设置Firefox浏览器。安装到位后用它访谈

步向下图所示页面。点击”增加到Firefox”,然后点击”即刻安装”,最后再度启航Firefox浏览器就可以成功安装。

云顶集团网站 1

主面板

设置完毕未来,在Firefox浏览器的地方后方就能有一个小虫子的Logo云顶集团网站 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)。


 

  调整台面板

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

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

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.面板内的子菜单

垄断(monopoly)台面板内有一排子菜单,分别是革除、保持、轮廓、全体等。

云顶集团网站 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<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<一千;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结构;第多少个标签用于查占星应的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等的加载景况,使分析更灵活。

  脚本面板

本子面板不只能查看页面内的脚本,而且还会有强盛的调整效能。

在剧本面板的右边有“监察和控制”、“货仓”和“断点”八个面板,利用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

资源

连忙键:按<F12>能够高速开启Firebug,如若想获得完整的火速键列表,可以访谈.

主题材料:假若设置进度中相见了好多不便,能够查阅Firebug的Q&A,网站为.

Firebug插件:Firebug除了自个儿强盛的功效之外,还应该有基于Firebug的插件,它们用于扩大Firebug的职能。比方谷歌(Google)公司支付Page Speed插件,开荒职员能够行使它来评估他们网页的属性,并获得有关怎样立异质量的建议。Yahoo集团支付的用来检查实验页面全部质量的YSlow和用于调节和测量检验PHP的FirePHP。还会有用于调节和测验Cookie的Firecookie等。

总结

透过本文的就学,读者能够明白Firebug的基本成效。Firebug已经渐渐成为叁个调养平台,而不光是二个粗略的Firefox增添插件。学好Firebug能给以往的读书和做事提供一定的提携。

参照他事他说加以考察文献:《锋利的JQuery(第2版)》

1 赞 3 收藏 1 评论

云顶集团网站 33

本文由云顶集团官网手机版发布于web前端,转载请注明出处:10分钟学会前端调节和测量试验利器云顶集团网站

上一篇:我觉得我们还是有必要积极关注并勇敢地加以实 下一篇:没有了
猜你喜欢
热门排行
精彩图文