澳门新萄京8522firefox插件Firebug的利用教程

澳门新萄京8522firefox插件Firebug的利用教程

  脚本面板

剧本面板不仅能够查看页面内的本子,而且还有庞大的疗养效能。

在剧本面板的左边有“监察和控制”、“仓库”和“断点”四个面板,利用Firebug提供的安装断掉的法力,能够很有益地调节和测试程序,如下图所示:

澳门新萄京8522 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代码,能够在此处安装断点。比方在第伍行那句代码前边单击一下,那它后面就会现出一个鲜蓝的圆点,表示此处已经被安装了断点。此时,在右侧断点面板的断点列表中就涌出了刚刚设置的断点。假若想目前禁止使用有个别断点,能够在断点列表中去掉有个别断点的前头的复选框中的勾,那么此时左手面板中相应的断点就从红雾灰造成了葱绿黄色了。

澳门新萄京8522 2

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

澳门新萄京8522 3

那时候JavaScript内容上方的澳门新萄京8522 4八个按键已经变得可用了。它们分别表示“继续实行”、“单步进入”、“单步跳过”和“单步退出”。

继续推行<F8>:当通过断点来终止实施脚本时,单击<F八>就会东山再起奉行脚本。

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

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

单步退出<shift+F1一>:允许复苏脚本的试行,直到下三个断点甘休。

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

澳门新萄京8522 5

澳门新萄京8522 6

从上图能够见见,当鼠标移动到“lab”变量上时,就足以显示出它的内容是一个DOM成分,即“div#messageLabel”。

此时将右手面板切换来“监察和控制”面板,那里列出了多少个变量,包罗“this”指针的针对性以及“lab”变量。单击“+”能够见到详细的音讯。呈现如下:

澳门新萄京8522 7

二.规范断点

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

澳门新萄京8522 8

终极单击页面包车型大巴“Click
Here”开关。能够发掘,脚本在“arr==5”这几个表明式为真时停下了,由此“五”以及以往的数字未有显示到页面中。下图分别是常规功效和安装了标准化断点之后的来得效果相比较:

澳门新萄京8522 9澳门新萄京8522 10

CSS、DOM和互连网面板

那二个面板绝对于前方1个面板比较次要,CSS和DOM面板与HTML面板中左侧的面板效能相似,但比不上HTML面板灵活,因而一般采获得很少。

CSS面板特有的1个职能就是足以分别详细查看页面中内嵌以及动态导入的样式。如下图所示:

澳门新萄京8522 11

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

而在网络面板中,相对有部分强有力的作用,举个例子张开有些网址首页,Firebug显示效果如下图所示:

澳门新萄京8522 12

该页面可以监视每1项成分的加载意况,包涵剧本,图片等的高低以及加载用时等,对于页面优化有着极其首要的意思。

其它,顶部仍是可以够分类查看成分的HTML、CSS、JS等的加载情形,使分析越来越灵敏。

 

可视化的CSS尺标
咱俩能够运用Firebug来查阅页面中某壹区块的CSS样式表,如若进一步拓展左侧Layout
tab的话,它会以标尺的样式将日前区块占用的面积清楚地方统一规范识出来,准确到象素,更令人惊叹的是,你可见在这几个可视化的分界面中一贯修改各象素的值,页面上区块的职责就会随退换而变化。在页面中一些因素现身错位或然面积超过预料值时,该效用能够提供立竿见影的扶持,你能够籍此分析offset、margin、
padding、size之间的涉及,从而找寻化解难点的不二等秘书诀。

主面板

设置到位之后,在Firefox浏览器的地方后方就会有二个小虫子的Logo澳门新萄京8522 13。单击该Logo后就可以举办Firebug的调控台,也能够由此连忙键<F1贰>来展开调节台。使用Ctrl+F1贰连忙键能够使Firebug独立张开一个窗口而不占用Firefox页面尾巴部分的长空。

澳门新萄京8522 14

从上海图书馆中得以见见,Firebug包涵多个面板:

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

HTML面板:用于查看HTML成分,能够实时地编辑HTML和更动CSS样式,它包涵3个子面板,分别是体制、布局和DOM面板;

CSS面板:用于查看全数页面上的CSS文件,可以动态地修改CSS样式,由于HTML面板中已经包蕴了贰个CSS面板,由此该面板将很少用到;

剧本面板:用于显示Javascript文件及其所在的页面,也能够用来展现Javascript的Debug调节和测试,包罗三个子面板,分别是监察和控制、饭店和断点;

DOM面板:用于展示页面上的有着目标;

网络面板:用于监视网络移动,能够援协助调查看二个页面包车型大巴载入景况,包蕴文件下载所攻克的时日和文件下载出错等新闻,也足以用来监视Ajax行为;

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


 

概述

FireBug是二个用于网址前端开拓的工具,它是FireFox浏览器的2个恢弘插件。它能够用于调节和测试JavaScript、查看DOM、分析CSS、监察和控制互连网流量以及开始展览Ajax交互等。它提供了差不多前端开荒须要的漫天效能。

官网:www.getfirebug.com

澳门新萄京8522 15

从图1中来看,Firebug有六个重大的Tab开关,下文将根本介绍介绍这几上边的效益。
Console HTML CSS Script Dom Net
操纵台 Html查看器 Css查看器 脚本条时代 Dom查看器 互联网处境监视

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

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

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

剧本面板

本子面板不仅能够查看页面内的剧本,而且还有壮大的调弄整理作用。

在本子面板的右手有“监察和控制”、“饭店”和“断点”四个面板,利用Firebug提供的安装断掉的作用,可以很便宜地调节和测试程序,如下图所示:

澳门新萄京8522 16

1.静态断点
譬如test.html文件,代码如下:

<!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代码,能够在此地安装断点。比方在第四行那句代码前边单击一下,那它后面就会油但是生三个深蓝的圆点,表示此处已经被安装了断点。此时,在右手断点面板的断点列表中就应运而生了刚刚设置的断点。要是想目前禁止使用有些断点,可以在断点列表中去掉某些断点的日前的复选框中的勾,那么此时左手面板中相应的断点就从红天蓝产生了红宝浅绿了。

澳门新萄京8522 17

安装完断点之后,大家就足以调节和测试程序了。单击页面中的“Click
Here”按键,能够看出剧本截止在用谈灰褐底色标出的那1行上。此时用鼠标移动到有些变量上就能够显示此时以此变量的value。展现效果如下:

澳门新萄京8522 18

此时JavaScript内容上方的七个按键已经变得可用了。它们各自表示“继续实行”、“单步进入”、“单步跳过”和“单步退出”。

  • 继续试行<F8>当通过断点来终止实施脚本时,单击<F8>就会东山再起试行脚本。
  • 单步进入<F11>允许跳到页面中的别的函数内部。
  • 单步跳过<F10>单击<F10>来一向跳过函数的调用即跳到return之后。
  • 单步退出<shift+F11>同意复苏脚本的实施,直到下贰个断点甘休。

单击“单步进入”开关,代码会跳到下一行,突显效果如下:

澳门新萄京8522 19

澳门新萄京8522 20

从上海体育场合能够看出,当鼠标移动到“lab”变量上时,就足以来得出它的内容是1个DOM成分,即“div#messageLabel”。

那儿将右手面板切换成“监察和控制”面板,那里列出了多少个变量,包罗“this”指针的指向以及“lab”变量。单击“+”能够见到详细的消息。彰显如下:

澳门新萄京8522 21

2.标准化断点

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

澳门新萄京8522 22

最后单击页面包车型大巴“Click Here”按键。能够窥见,脚本在“arr==5”那个表达式为真时停下了,因而“5
”以及随后的数字尚未显得到页面中。下图分别是不奇怪职能和设置了尺度断点之后的展现效果相比较:

澳门新萄京8522 23

澳门新萄京8522 24

澳门新萄京8522 25

Javascript调试器

那是1个很不错的javascript脚本调节和测试器,占用空间相当小,可是单步调试、设置断点、变量查看窗口贰个广大。正所谓麻雀虽小,伍脏俱全。

假若您有贰个网站已经济建设成,但是它的javascript有总体性上的标题要么不是太圆满,能够由此面板上的Profile来计算每段脚本运维的时光,查看毕竟是哪些语句试行时间过长,一步步革除难点。

图7:javascript调试器
澳门新萄京8522 26

CSS、DOM和网络面板

那3个面板相对于前方一个面板相比较次要,CSS和DOM面板与HTML面板中右边的面板成效相似,但不及HTML面板灵活,由此一般选择得很少。

CSS面板特有的三个意义就是能够分级详细查看页面中内嵌以及动态导入的样式。如下图所示:

澳门新萄京8522 27

单击CSS面板后就足以分别查占星应的样式。此处张开的体制都是经过格式化的,适合于就学CSS的代码格式和正规。

而在网络面板中,相对有一部分无敌的法力,比如展开有些网址首页,Firebug彰显效果如下图所示:

澳门新萄京8522 28

该页面能够监视每一种成分的加载景况,包罗剧本,图片等的高低以及加载用时等,对于页面优化有着极其主要的含义。

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

主面板

安装实现将来,在Firefox浏览器的地方后方就会有三个小虫子的Logo。单击该图标后就可以实行Firebug的调节台,也足以经过快捷键<F12>来开荒调整台。使用Ctrl+F12快速键能够使Firebug独立展开三个窗口而不占用Firefox页面尾部的上空。

澳门新萄京8522 29

从上海体育场地中能够看来,Firebug包含七个面板:

  • 支配台面板:用于记录日志、大概浏览、错误提醒和实施命令行,同时也用于Ajax的调试;
  • HTML面板:用以查看HTML成分,能够实时地编辑HTML和退换CSS样式,它包罗三个子面板,分别是体制、布局和DOM面板;
  • CSS面板:用以查看全部页面上的CSS文件,可以动态地修改CSS样式,由于HTML面板中曾经蕴含了三个CSS面板,因而该面板将很少用到;
  • 剧本面板:用来展现Javascript文件及其所在的页面,也得以用来显示Javascript的Debug调节和测试,包涵一个子面板,分别是监督、仓库和断点;
  • DOM面板:用以彰显页面上的具备目的;
  • 互连网面板:用以监视网络活动,能够援协助调查看二个页面包车型客车载入情状,包含文件下载所据有的时日和文件下载出错等音信,也得以用于监视Ajax行为;
  • Cookies面板:用来查看和调动cookie(必要安装下文财富中所提到的Firecookie)。

  在上图的美食指南中得以领略看到,你能够对HTML元素实行八种多种的修改操作,方法是先点击HTML部分的代码,然后鼠标右键就可以在弹出的美食做法中进行操作。

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

总结

通过本文的就学,读者能够调控Firebug的基本功用。Firebug已经日渐变为一个调解平台,而不仅仅是四个粗略的Firefox扩张插件。学好Firebug能给未来的读书和做事提供一定的相助。

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

1 赞 3 收藏 1
评论

澳门新萄京8522 30

小编:惟吾德馨‘
原稿地址:http://www.cnblogs.com/allenben/p/4757274.html

澳门新萄京8522 31

什么是Firebug
致力了数年的Web开拓工作,越来越感到未来对WEB开采有了越来越高的必要。要写出优质的HTML代码;要编制精致的CSS样式表呈现种种页面模块;要调治javascript给页面增加部分更活跃的因素;要运用Ajax给用户带来越来越好的心得。贰个理想的WEB开拓人士供给兼顾更加多层面,才具交出一份同样卓越的学业。为协助广大正处在Web二.0洪流中的开辟职员,在那边为大家介绍壹款轻易灵活的支持开采工具。

概述

  FireBug是一个用来网站前端开垦的工具,它是FireFox浏览器的2个扩大插件。它可以用来调节和测试JavaScript、查看DOM、分析CSS、监察和控制互连网流量以及开始展览Ajax交互等。它提供了大概前端开垦需求的凡事功用。官方网址:www.getfirebug.com

何以收获Firebug?

因为它是Firefox浏览器的二个扩张插件,所以率先须求下载Firefox浏览器。读者能够访问www.mozilla.com下载并安装Firefox浏览器。安装到位后用它访问

进去下图所示页面。点击”加多到Firefox”,然后点击”立刻安装”,最终再次开动Firefox浏览器就能够产生安装。

澳门新萄京8522 32

决定台面板

一.说了算台面板大概浏览此面板能够用于记录日志,也足以用来输入脚本的命令行。

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

  • console.log大致的记录日志;
  • console.debug笔录调节和测试新闻,并且附上行号的超链接;
  • console.error在新闻前显示错误Logo,并且附上行号的超链接;
  • console.info在音讯前显示音信图标,并且附上行号的超链接;
  • console.warn在纤细钱突显警告Logo,并且附行号的超链接。

在空白的html页面中,向<body>标签中参预<script>标签,代码如下:

<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。

澳门新萄京8522 33

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

以此效果看似于C语言中的语法,能够在console记录日志的格局里使用。
%s:字符串  %d,%i:数字  %f:浮点数  %o:链接对象
再正是,那多少个函数辅助四个变量。代码如下:

<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>

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

澳门新萄京8522 34

Firebug调控台还提供了任何职能,比如质量评定函数实行时间、音信分组、测试驱动、追踪、计数以及查看Javascript概略等。越来越多材质能够访问这里

四.面板内的子菜单

决定台面板内有一排子菜单,分别是扫除、保持、轮廓、全部等。

澳门新萄京8522 35

“清除”用于破除调整长沙的内容。“保持”则是把调控马赛的内容保留,就算刷新了依然还留存。“全体”则是展示任何的新闻。后边的“错误”、“警告”、“新闻”、“调节和测试音信”、“Cookies”菜单则是对具有开始展览了八个分类。

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

<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>

开发页面,显示八个开关:

澳门新萄京8522 36

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

澳门新萄京8522 37

从上图中能够看出,出现了一行字,“轮廓搜罗中。再度点击“轮廓”查看结果。”,接着,依次单击“施行循环①”、“试行循环贰”、“实践循环三”三个开关各叁次,并再度单击“概略菜单”,就能够看出如下图所示结果:

澳门新萄京8522 38

能够见见Firebug展现出了要命详尽的告知。包涵各类函数的函数名、调用次数、占用时间的比重、占用时间、时间、平均时间、最时辰间、最大日子以及所在的公文的行数等消息。

5.Ajax调试

支配台面板也可用以Ajax调节和测试,在一定水平上得以代替互连网面板。比方笔者张开四个页面,能够在Firebug调节台看到此次Ajax的Http请求头新闻和服务器响应头新闻。如下图,它会显得出本次使用的Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最重大的是有6个标签,即参数、头新闻、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数;第二个标签用于查看响应头音信和伸手头消息;第一个标签用于查看服务器再次回到的始末;第多少个标签则是翻开服务器再次来到的HTML结构;第4个标签用于查占星应的Cookies。

澳门新萄京8522 39

比方看不到任何消息的出现,可能是将此功用关闭了,能够单击“调节台”旁边的下拉箭头,将“显示XMLHttpRequests”前边的勾勾选上就能够。

澳门新萄京8522 40

澳门新萄京8522 41

支配台还有个重要的功效就是翻开脚本的log,
在此在此以前你大概习贯了应用alert来打字与印刷变量,不过Firebug给我们带来了一个新情人
—— console.log, 最简便的打字与印刷日志的语法是这么的:

资源

急速键:按<F1二>可以便捷开启Firebug,假设想赢得完整的火速键列表,能够访问.

难题:如若设置进度中遇见了难堪,能够查阅Firebug的Q&A,网站为.

Firebug插件:Firebug除了本人庞大的作用之外,还有基于Firebug的插件,它们用于扩展Firebug的功能。比方Google集团开支Page
Speed插件,开拓职员能够动用它来评估他们网页的质量,并赢得有关怎么着改革质量的建议。Yahoo公司成本的用于检验页面全部品质的YSlow和用来调节和测试PHP的FirePHP。还有用于调节和测试Cookie的Firecookie等。

总结

通过本文的求学,读者能够掌握Firebug的基本成效。Firebug已经逐步改为五个调度平台,而不仅是3个简练的Firefox扩充插件。学好Firebug能给现在的求学和劳作提供一定的援救。

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

  不知情诸位有无碰着过如此的意况,在多少个复杂的HTML页面中,当您想找有个别页面成分的骨子里对应的HTML时,你不得不在一大堆HTML代码中去搜寻,十三分劳神。有了Firebug,未来您只须求在页面中,用鼠标右键选中某些成分,然后在弹出的菜系中,选拔“查看成分”,霎时就会在HTML页面代码中找到该因素对应的代码了,13分福利,如下图所示:

小结

Firebug插件提供了一整套web开辟所必备的工具。从HTML的编写制定,到CSS样式表的鼓吹调优,以及用javascript脚本开拓,亦恐怕Ajax应用,Firebug插件都会造成您的得力帮手。所谓工欲善其事,必先利其器。在Web二.0的时期,言必称Ajax,动辄就是用户体验进步,若是把Firebug工具用好,必能让你如虎生翼,将HTML、CSS、javascript整理得服服帖帖,从此成为web开辟中的专家级人物。

HTML面板

1.翻看和修改HTML代码

Html面板的无敌之处就是能查看和修改HTML代码,而且这一个代码都以经过格式化的。上面以自己的一个浏览器主页来做教师。

澳门新萄京8522 42

在页面古金色色部分代表成分自个儿,白灰表示padding部分,莲红表示margin部分。同时可以实时地增进、修改和删除HTML节点以及质量,如下图所示。别的,单击script节点还足以一向查看脚本,此处的脚本无论是内嵌在HTML中依旧外部导入的,都足以查阅到。同样这也适用于<style>标签内嵌也许导入的CSS样式和动态创制HTML代码。

澳门新萄京8522 43

在HTML调整台的左边能够看到全体页面当前的文书档案结构,可以透过单击“+”来进行。当单击相应的成分时,左边面板中就会显示出目前因素的样式、布局以及DOM音信。而当光标移动到HTML树中相应成分上时,上边页面中相应的因素将会被高亮显示。

譬如,将光标移动到多个<P>标签上,显示效果如下图所示:

澳门新萄京8522 44

在HTML调控台的左侧能够见到整个页面当前的文书档案结构,能够经过单击“+”来展开。当单击相应的因素时,右边面板中就会来得出当下成分的样式、布局以及DOM新闻。而当光标移动到HTML树中相应成分上时,上面页面中相应的因素将会被高亮展现。

诸如,将光标移动到3个<P>标签上,显示效果如下图所示:

2.查看(Inspect)

选用查看(Inspect)功能,能够快捷地搜索到有些成分的HTML结构,如图:

澳门新萄京8522 45

当单击”Inspect”开关后,用鼠标在网页上入选一个要素时,成分会被三个品蓝的层面住,同时上面包车型客车HTML面板中相应的HTML树也会议及展览开并且高亮展现。再一次单击后就可以退出该格局,并且尾部的HTML树也保险在那个状态。通过那一个效应,能够飞速搜索页面内的要素,调节和测试和查找相应代码非凡有利。刷新网页后,页面展现的依然是用Inspect选中的区域。

HTML面板下方的“编辑”按键可以用于直接编辑选中的HTML代码,而背后显示的是当下因素在方方面面DOM中的结构路线。

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

经过JavaScript来退换样式属性的值能够做到部分动画效果。张开页面后,利用查看(Inspect)作用来挑选相应的HTML代码,比如,选中“要闻”,如下图所示:

澳门新萄京8522 46

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

澳门新萄京8522 47

透过上海体育场地能够见到,HTML查看器会将页面上更换的内容页记录下来,并以土灰高亮代表。有了那么些功能,网页的暗箱操作将根本成为历史。大家能够选择该意义查看其余网址的卡通片效果是何许落到实处的。

四.查看和修改成分的体制

在右手的样式面板中,显示了此成分当前怀有的体制。全部的体制都能够实时地剥夺和改造,如下图所示,通过在”text-align:center”前单击会产出禁用的符号,那样就足以禁止使用此规则。通过直接在样式value值上单击就能够修改。

澳门新萄京8522 48

单击“布局”面板就能够看出此因素具体的布局属性,那是2个正规的盒模型。通过“布局”面板,能够很轻便地收看成分的偏移量、外边距、边框、内边距和要素的万丈、宽度等消息,如下图所示:

澳门新萄京8522 49

5.查看DOM的信息

单击“DOM”面板后得以见到此因素的事无巨细的DOM信息以及函数和事件,如下图所示:澳门新萄京8522 50

澳门新萄京8522 51

  当展开二个HTML页通过Firebug查看HTML代码时,你能够而且点在调整面板中的DOM树,就会以DOM的树型结构方式来看任何HTML的结构。而只要您是开垦了三个XML文件,那么鼠标右键点XML文件中的任何一个要素,在弹出的菜系中一样能够选择对XML实行连锁操作,如下图:

动用Inspect检查职能,大家还足以用鼠标在页面中央直机关接选用部分区块,查占星应的HTML源代码和CSS样式表,真正的成就所见即所得,假设你利用了外部编辑器修改了现阶段网页,能够点击Firebug的reload图片重新载入网页,它会继续追踪你前边用Inspect选中的区块,方便调节和测试。

  调节台面板

1.决定台面板大概浏览

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

二.记下日志

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。

澳门新萄京8522 52

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

本条作用周围于C语言中的语法,能够在console记录日志的秘籍里应用。

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

再者,那多少个函数协助多少个变量。代码如下:

JavaScript

<script type=”text/javascript”> var
kid=”孩子”,count=”3″,man=”Allen”; var
sport1=”篮球”,sport二=”羽球”,sport三=”网球”;
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>

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

澳门新萄京8522 53

Firebug调控台还提供了别的功用,比方检测函数试行时间、新闻分组、测试驱动、追踪、计数以及查看Javascript概略等。越来越多质感能够访问.

4.面板内的子菜单

支配台面板内有1排子菜单,分别是去掉、保持、概况、全体等。

澳门新萄京8522 54

“清除”用于破除调控沈阳的内容。“保持”则是把调节塞内加尔达喀尔的内容保留,即便刷新了1如既往还设有。“全部”则是展现全部的新闻。后边的“错误”、“警告”、“消息”、“调节和测试消息”、“库克ies”菜单则是对具备开始展览了三个分类。

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

JavaScript

<button type=”button” id=”btn1″>奉行循环1</button>
<button type=”button” id=”btn贰”>实践循环2</button>
<button type=”button” id=”btn3″>施行循环三</button>
<script type=”text/javascript”> var f一=function(){ for(var i
=0;i<一千;i++) for(var j=0;j<1000;j++); } function f2(){ for(var i
=0;i<一千;i++) for(var j=0;j<一千;j++); }
document.getElementById(“btn一”).onclick=f1;
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>

开采页面,显示多个按键:

澳门新萄京8522 55

开荒页面后,先启用Firebug调节台面板,然后单击“轮廓”菜单,如下图所示:

澳门新萄京8522 56

从上海教室中能够见见,出现了一行字,“概略收罗中。再度点击“轮廓”查看结果。”,接着,依次单击“施行循环一”、“实践循环二”、“实行循环叁”多少个开关各一回,并再一次单击“轮廓菜单”,就可以看出如下图所示结果:

澳门新萄京8522 57

可以看看Firebug显示出了尤其详细的告诉。包蕴各类函数的函数名、调用次数、占用时间的百分比、占用时间、时间、平均时间、最时辰间、最大时间以及各州的文本的行数等音讯。

5.Ajax调试

支配台面板也可用以Ajax调节和测试,在一定水平上得以代表网络面板。举个例子笔者张开几个页面,能够在Firebug调节台看到此番Ajax的Http请求头消息和服务器响应头新闻。如下图,它会显得出此番使用的Ajax的GET方法、地址、耗费时间以及调用Ajax请求的代码行数。最重视的是有四个标签,即参数、头新闻、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数;第3个标签用于查看响应头消息和呼吁头新闻;第多个标签用于查看服务器重返的剧情;第二个标签则是查看服务器重返的HTML结构;第陆个标签用于查占星应的Cookies。

澳门新萄京8522 58

万壹看不到任何音信的面世,可能是将此效率关闭了,能够单击“调控台”旁边的下拉箭头,将“呈现XMLHttpRequests”前边的勾勾选上就能够。

澳门新萄京8522 59

HTML面板

一.查看和修改HTML代码

Html面板的雄强之处就是能查看和修改HTML代码,而且那些代码都以由此格式化的。下边以本身的一个浏览器主页来做教师。

澳门新萄京8522 60

在HTML调节台的左手能够看出任何页面当前的文书档案结构,能够因而单击“+”来拓展。当单击相应的因素时,左侧面板中就会显得出当下因素的体制、布局以及DOM音讯。而当光标移动到HTML树中相应成分上时,上面页面中相应的要素将会被高亮显示。
譬如,将光标移动到三个<P>标签上,展现效果如下图所示:

澳门新萄京8522 61

在页面棕深灰蓝部分代表成分本人,玛瑙红表示padding部分,中灰表示margin部分。同时能够实时地加上、修改和删除HTML节点以及质量,如下图所示。其它,单击script节点还足以一贯查看脚本,此处的剧本无论是内嵌在HTML中还是外表导入的,都得以查看到。同样这也适用于<style>标签内嵌或许导入的CSS样式和动态创设HTML代码。

澳门新萄京8522 62

2.查看(Inspect)

行使查看(Inspect)功效,能够高速地查找到某些元素的HTML结构,如图:

澳门新萄京8522 63

当单击”Inspect”按键后,用鼠标在网页上入选二个要素时,成分会被三个棕色的范畴住,同时上边包车型客车HTML面板中相应的HTML树也会进展并且高亮展现。再次单击后就能够退出该格局,并且尾部的HTML树也维持在这几个场所。通过那一个功用,能够高速找寻页面内的因素,调节和测试和查究相应代码异常便宜。刷新网页后,页面显示的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”按钮能够用来直接编辑选中的HTML代码,而前边突显的是现阶段因素在全体DOM中的结构路径。

叁.查看DOM中被剧本更动的壹部分

经过JavaScript来改动样式属性的值能够产生都部队分动画效果。展开页面后,利用查看(Inspect)效用来挑选相应的HTML代码,举个例子,选中“要闻”,如下图所示:

澳门新萄京8522 64

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

澳门新萄京8522 65

透过上图能够看来,HTML查看器会将页面上更动的内容页记录下来,并以赫色高亮表示。有了那么些意义,网页的潜规则将根本产生历史。我们得以动用该效能查看别的网址的卡通片效果是哪些贯彻的。

4.翻看和更改成分的体制

在左边的体裁面板中,展示了此成分当前具有的样式。全体的样式都足以实时地剥夺和改换,如下图所示,通过在”text-align:center“前单击会并发禁止使用的标志,那样就足以禁用此规则。通过直接在样式value值上单击就能够修改。

澳门新萄京8522 66

单击“布局”面板就可以看到此因素具体的布局属性,那是一个职业的盒模型。通过“布局”面板,能够很轻松地收看成分的偏移量、外边距、边框、内边距和要素的冲天、宽度等新闻,如下图所示:

澳门新萄京8522 67

5.查看DOM的信息

单击“DOM”面板后能够见见此因素的事无巨细的DOM信息以及函数和事件,如下图所示:

澳门新萄京8522 68

  在Firebug中,还是能安装带条件决断的断点,如下图:

DOM查看器

DOM(Document Object
Model)里头包括了大气的Object以及函数、事件,在以前,你要想从中查到要求的始末,绝非易事,那好比你去了2个了不起的体育场所,想要找到几本名字不太方便的小书,众多的取舍会让您无所用心。而使用Firebug的DOM查看器却能有利于地浏览DOM的内部结构,帮忙您快捷稳固DOM对象。双击多个DOM对象,就可见编辑它的变量或值,编辑的同时,你大概会意识它还有自动完结功效,当你输入document.get之后,按下tab键就能补齐为
document.getElementById,十分有利于。假若您认为补齐得不够美貌,按下shift+tab又会恢复生机原状。用了Firebug的
DOM查看器,你的javascript从此找到了促使的目的,Web开采只怕就成了壹件乐事。

图8: Dom查看器
澳门新萄京8522 69

何以收获Firebug?

因为它是Firefox浏览器的1个扩展插件,所以率先须要下载Firefox浏览器。读者能够访问www.mozilla.com下载并设置Firefox浏览器。安装完结后用它访问这里

进去下图所示页面。点击”加多到Firefox”,然后点击”立即安装”,最终重复启航Firefox浏览器就可以到位安装。

澳门新萄京8522 70

澳门新萄京8522 71

提醒:借使您正在攻读CSS样式表的使用,然则总记不住常用的样式表有啥值,能够品味在CSS调试器中当选二个体制表属性,然后用前后方向键来改动它的值,它会把只怕的值二个个遍历给你看。

资源

快捷键:<F12>能够高速开启Firebug,若是想获得完整的快速键列表,能够访问这里

问题:万一设置进程中相见了好些个不便,能够查阅Firebug的Q&A

Firebug插件:
Firebug除了自家庞大的效应之外,还有基于Firebug的插件,它们用于扩展Firebug的效益。比方谷歌(Google)公司支付Page
Speed插件,开拓人士能够行使它来评估他们网页的属性,并获得有关如何改良品质的建议。Yahoo公司支付的用于检查评定页面全体品质的YSlow和用来调节和测试PHP的FirePHP。还有用于调试库克ie的Firecookie等。

  二、能够动用Firebug修改HTML和CSS

三个出色的选取就是页面中的三个区块地点展现略微不太对劲,它要求活动多少个象素。这时候用CSS调试工具得以随意编辑它的职务——你能够依赖须求自由活动象素。
如图四中正在修改一个区块的背景观。

  Firebug还提供了至极功用强大的互连网数据监功用。开荒者在开荒web应用时,平常要考查各种HTTP请求和答复,在那地点Firebug的效应11分精锐。首先,只必要开启调节面板中的网络成效,然后在历次运维页面时,都能够知晓看到种种HTTP的乞求和HTTP回应的切实细节。如下图:

澳门新萄京8522 72

  总结

澳门新萄京8522 73

  一样,也提供了更飞快的主意:只须要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中活动时,在Firebug调整杜阿拉就立即显得移动时经过的HTML成分的代码:

近年来的网页设计言必称div+css,假诺您是用table套出来的HTML页面,就得按那规矩重构2回,不然显得你不够前卫!用div做出来的页面包车型大巴确能简单HTML代码,HTML标签消脂的结果便是CSS样式表的编写成了页面制作的侧注重。Firebug的CSS查看器不仅自下向上列出每五个CSS样式表的专属承接关系,还列出了每2个体裁在哪些样式文件中定义。你能够在那几个查看器中央直机关接助长、修改、删除一些CSS样式表属性,并在现阶段页面中央直属机关接观望修改后的结果。

澳门新萄京8522 74

象C shell或Python
shell同样,你还是能在调整布里斯托查阅变量内容,直接运转javascript语句,就到底大段的javascript程序也能够科学运维并得到运行期的音讯。

发表评论

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

网站地图xml地图