当前位置: 56net亚洲必嬴 > Web前端 > 正文

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

时间:2019-10-30 09:00来源:Web前端
10分钟学会前端调节和测量试验利器——FireBug 2015/09/17 · HTML5,JavaScript · 1评论 ·调试 原版的书文出处:惟吾德馨(@阿伦_Bryant)    时间:2011-02-20 10:05 来源:IT168 作者:网络 点击: 3158 次

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浏览器就能够到位安装。

必赢56.net 1

深信广大从事Web开采工作的开拓者都听说和应用过Firebug,但恐怕超越1/3人还不通晓,其实它是贰个在网页设计方面机能相当刚劲的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript举行周密的追踪和调节和测量检验。它是Firefox浏览器的三个插件,所以提出各位Web开采者

Firebug是Firefox下的生龙活虎款开采类插件,现属于Firefox的甲级强力推荐插件之生龙活虎。它集HTML查看和编写制定、 Javascript调节台、网络情状监视器于意气风发体,是开荒JavaScript、CSS、HTML和Ajax的得力帮手。Firebug就像风度翩翩把精巧的瑞士联邦军刀,从各样不相同的角度分析Web页面内部的细节层面,给Web开拓者带来非常大的便利。那是风流洒脱款令人爱不忍释的插件,假设你从前没有接触过它,大概在读书本文之后,会有豆蔻梢头试的私欲。小编在创作此文的时候,正逢Firebug发表1.0正规版,这一定要说是种巧合。

主面板

设置到位之后,在Firefox浏览器的地址后方就能够有一个小虫子的Logo必赢56.net 2。单击该Logo后就能够开展Firebug的调节台,也能够因此快速键<F12>来开垦调节台。使用Ctrl+F12神速键能够使Firebug独立张开一个窗口而不占用Firefox页面尾巴部分的空间。

必赢56.net 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.操纵台面板大概浏览

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

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。

必赢56.net 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>

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

必赢56.net 5

Firebug调整台还提供了其余职能,举个例子检验函数施行时间、新闻分组、测量试验驱动、追踪、计数以至查看Javascript概略等。更加的多材料能够访谈.

4.面板内的子菜单

操纵台面板内有一排子菜单,分别是歼灭、保持、概略、全体等。

必赢56.net 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>

张开页面,呈现四个开关:

必赢56.net 7

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

必赢56.net 8

从上海体育场合中得以见见,现身了生机勃勃行字,“概略收罗中。再次点击“轮廓”查看结果。”,接着,依次单击“试行循环1”、“施行循环2”、“试行循环3”八个按键各贰遍,并再度单击“概略菜单”,就能够看出如下图所示结果:

必赢56.net 9

能够看出Firebug展现出了特别详细的报告。包蕴每种函数的函数名、调用次数、占用时间的比重、占用时间、时间、平均时间、最小时间、最大时间以至外省的文件的行数等新闻。

5.Ajax调试

决定台面板也可用于Ajax调节和测量试验,在必然水平上得以替代互联网面板。举个例子笔者张开三个页面,能够在Firebug调整台见到此番Ajax的Http必要头音信和服务器响应头音讯。如下图,它会来得出这次使用的Ajax的GET方法、地址、耗费时间以至调用Ajax须求的代码行数。最重大的是有5个标签,即参数、头音信、响应、HTML、库克ies.首个标签用于查看传递给服务器的参数;第1个标签用于查看响应头音讯和伸手头新闻;第几个标签用于查看服务器重回的剧情;第八个标签则是翻开服务器重临的HTML结构;第四个标签用于查看相应的Cookies。

必赢56.net 10

只要看不到任何音信的产出,恐怕是将此效用关闭了,能够单击“调整台”旁边的下拉箭头,将“彰显XMLHttpRequests”前边的勾勾选上就可以。

必赢56.net 11

   

在装置好插件之后,先用Firefox浏览器展开要求测验的页面,然后点击右下方的浅绿灰开关或接受快速键F12唤出Firebug插件,它会将这段日子页面分成上下八个框架,如图1所示。

HTML面板

1.翻看和改正HTML代码

Html面板的刚劲之处正是能查看和改过HTML代码,何况那几个代码都以由此格式化的。上面以自家的二个浏览器主页来做讲明。

必赢56.net 12

在页面蔚酸性绿部分代表成分自身,蓝紫表示padding部分,中灰表示margin部分。相同的时候能够实时地增进、矫正和删除HTML节点以致质量,如下图所示。别的,单击script节点还足以一贯查看脚本,此处的脚本无论是内嵌在HTML中照旧外表导入的,都得以查见到。相通那也适用于<style>标签内嵌或许导入的CSS样式和动态创造HTML代码。

必赢56.net 13

在HTML调整台的左臂可以看来整个页面当前的文书档案结构,能够经过单击“+”来扩充。当单击相应的因素时,左边边板中就交易会示出当下成分的样式、布局以至DOM新闻。而当光标移动到HTML树中相应成分上时,上边页面中相应的因素将会被高亮突显。

举例,将光标移动到三个<P>标签上,展现效果如下图所示:

必赢56.net 14

在HTML调节台的左侧能够见见任何页面当前的文档结构,可以经过单击“+”来进展。当单击相应的要素时,右左边板中就交易会示出脚下成分的体制、布局以致DOM音讯。而当光标移动到HTML树中相应成分上时,上边页面中相应的要素将会被高亮显示。

比方说,将光标移动到一个<P>标签上,突显效果如下图所示:

2.查看(Inspect)

动用查看(Inspect)作用,能够急迅地查找到某些成分的HTML结构,如图:

必赢56.net 15

当单击”Inspect”开关后,用鼠标在网页上入选二个因素时,成分会被五个宝石蓝的范畴住,同一时间上面包车型客车HTML面板中相应的HTML树也会实行並且高亮呈现。再度单击后就能够退出该情势,况兼尾部的HTML树也维持在这里个情景。通过那几个效应,能够非常的慢寻觅页面内的成分,调试和搜索相应代码特别常有援助。刷新网页后,页面展现的依然是用Inspect选中的区域。

HTML面板下方的“编辑”按键能够用来直接编辑选中的HTML代码,而前边显示的是日前成分在全方位DOM中的结构路线。

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

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

必赢56.net 16

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

必赢56.net 17

因此上海体育场地能够见见,HTML查看器会将页面上改换的从头到尾的经过页记录下来,并以淡褐高亮代表。有了这些作用,网页的不成文规则将深透形成历史。大家得以采取该意义查看其余网址的动画片效果是怎么着促成的。

4.查看和矫正成分的体裁

在右边手的体制面板中,展示了此成分当前怀有的体裁。全数的体裁都能够实时地剥夺和退换,如下图所示,通过在”text-align:center”前单击会现出禁用的符号,那样就足以禁止使用此法规。通过一向在体制value值上单击就能够修改。

必赢56.net 18

单击“布局”面板就可以看出此因素具体的布局属性,那是二个标准的盒模型。通过“布局”面板,能够超级轻巧地看出元素的偏移量、外边距、边框、内边距和要素的莫斯中国科学技术大学学、宽度等音信,如下图所示:

必赢56.net 19

5.查看DOM的信息

单击“DOM”面板后能够看见此因素的详细的DOM信息甚至函数和事件,如下图所示:必赢56.net 20

 

图1:Firebug插件张开图示

CSS、DOM和网络面板

那3个面板绝对于前方2个面板相比次要,CSS和DOM面板与HTML面板中右边的面板效能形似,但比不上HTML面板灵活,因而平时接纳得超级少。

CSS面板特有的二个效应便是能够独家详细查看页面中内嵌以致动态导入的体制。如下图所示:

必赢56.net 21

单击CSS面板后就足以分别查六柱预测应的样式。此处张开的样式都以因而格式化的,切合于就学CSS的代码格式和正规。

而在互联网面板中,相对有部分精锐的职能,比方展开某些网址首页,Firebug突显效果如下图所示:

必赢56.net 22

该页面可以监视每生机勃勃项成分的加载意况,包罗剧本,图片等的深浅以至加载用时等,对于页面优化有着特别首要的含义。

除此以外,顶上部分还足以分类查看成分的HTML、CSS、JS等的加载情状,使剖析更灵活。

 相信广大转业Web开拓职业的开拓者都闻讯和使用过Firebug,但也许超过半数人还不了然,其实它是贰个在网页设计方面功用相当强盛的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript进行宏观的追踪和调解。它是Firefox浏览器的五个插件,所以提议各位Web开荒者,要充裕利用FireFox浏览器和Firebug插件进行普通的调理专门的工作。本文采取了13个Web开采者应该精晓的Firebug的至少应用本领,介绍给大家。

必赢56.net 23

  脚本面板

本子面板不只好够查看页面内的剧本,何况还会有强大的调节和测验功用。

在本子面板的左边手有“监察和控制”、“货仓”和“断点”四个面板,利用Firebug提供的设置断掉的机能,可以很有益于地调节和测量检验程序,如下图所示:

必赢56.net 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行那句代码前边单击一下,那它后边就相会世一个中蓝的圆点,表示此处已经被安装了断点。这时,在右臂断点面板的断点列表中就应际而生了刚刚设置的断点。假使想不经常禁止使用某些断点,能够在断点列表中去掉有些断点的前头的复选框中的勾,那么那个时候左边手面板中相应的断点就从红灰褐产生了红乌紫色了。

必赢56.net 25

设置完断点之后,大家就足以调节和测量试验程序了。单击页面中的“Click Here”开关,能够看看剧本停止在用谈肉色底色标出的那大器晚成行上。那时用鼠标移动到有些变量上就能够展现那时候以此变量的value。展现效果如下:

必赢56.net 26

那儿JavaScript内容上方的必赢56.net 27多个按键已经变得可用了。它们分别代表“继续试行”、“单步走入”、“单步跳过”和“单步退出”。

继续试行<F8>:当通过断点来终止施行脚本时,单击<F8>就能够卷土而来实行脚本。

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

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

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

单击“单步走入”开关,代码会跳到下风流罗曼蒂克行,展现效果如下:

必赢56.net 28

必赢56.net 29

从上航海用体育地方能够阅览,当鼠标移动到“lab”变量上时,就能够来得出它的剧情是三个DOM成分,即“div#messageLabel”。

那会儿将右侧边板切换成“监察和控制”面板,这里列出了多少个变量,包涵“this”指针的对准以致“lab”变量。单击“+”能够看出详细的音信。展现如下:

必赢56.net 30

2.尺度断点

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

必赢56.net 31

最后单击页面的“Click Here”按键。能够开采,脚本在“arr==5”那个表明式为真时停下了,因而“5”以至以往的数字未有展现到页面中。下图分别是正规成效和安装了准星断点之后的来得效果比较:

必赢56.net 32必赢56.net 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出去的参数、 UEvoqueL,http头以至回馈的开始和结果,原来就如在私自黑匣子里运维的顺序被清晰地展现在你日前。

总结

透过本文的学习,读者能够通晓Firebug的基本效能。Firebug已经日趋成为二个调养平台,而不仅仅是贰个简易的Firefox扩大插件。学好Firebug能给未来的求学和劳作提供一定的推抢。

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

1 赞 3 收藏 1 评论

必赢56.net 34

 

象C shell或Python shell相符,你还是可以在调整台南查阅变量内容,直接运维javascript语句,就算是大段的javascript程序也能够精确运转并得到运营期的音讯。

必赢56.net 35

决定台还大概有个基本点的效率正是查看脚本的log, 从前您大概习于旧贯了选用alert来打印变量,但是Firebug给大家带来了叁个新相恋的人—— console.log, 最简便的打字与印刷日志的语法是这么的:

 

console.log(”hello world”)

  同样,也提供了更神速的章程:只须求点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug调节新竹就立即显得移动时通过的HTML成分的代码:

尽管您有一群参数供给组合在联合输出,能够写成这么:

 

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

必赢56.net 36

Firebug的日记输出有八种可选的格式甚至语法,以至能够定制彩色输出,比起单调的alert,明显尤其便利,限于篇幅,这里不做详细表达,不过有志于提升debug功用的读者,可以到Firebug的官方站点(见附录)查看更详实的学科。

  2、能够使用Firebug纠正HTML和CSS

图2: 在调节台里调节和测验javascript

  通过Firebug,能够一向改换HTML,扩展HTML的习性,删除成分,扩大CSS样式及贯彻更多效果与利益,如下图:

必赢56.net 37

必赢56.net 38

查看和校订HTML
首先次看到Firebug强盛的HTML代码查看器,就认为它极度,比较于Firefox自带的HTML查看器,它的功能强大了重重。 HTML

必赢56.net,  在上海体育场地的菜系中得以知道看见,你能够对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选中的区块,方便调节和测量试验。

编辑:Web前端 本文来源:10分钟学会前端调节和测量试验利器——FireBug

关键词: