澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站firefox插件Firebug的应用教程

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

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

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

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

什么是Firebug
从业了数年的Web开荒职业,越来越感觉今后对WEB开辟有了更加高的渴求。要写出能够的HTML代码;要编写精致的CSS样式表体现每种页面模块;要调解javascript给页面增添一些更活跃的成分;要选择Ajax给用户带来越来越好的经验。四个优良的WEB开荒人士必要打点更加多层面,技能交出壹份同样优异的课业。为支援周围正处在Web二.0洪流中的开采人士,在此间为我们介绍1款轻松灵活的援救开辟工具。

Javascript的调整,是开拓Web应用越发是AJAX应用很要紧的一环,如今对Javascript进行调养的工具多数,小编比较喜欢使用的是Firebug。Firebug是Joe Hewitt开荒的壹套与Firefox集成在共同的功用庞大的web开辟工具,能够实时编辑、调节和测试和监测任何页面包车型地铁CSS、HTML和JavaScript。

概述

  FireBug是三个用于网站前端开采的工具,它是FireFox浏览器的二个扩展插件。它能够用于调节和测试JavaScript、查看DOM、分析CSS、监察和控制网络流量以及开展Ajax交互等。它提供了差不多前端开荒必要的全体功用。官方网站:www.getfirebug.com

什么样得到Firebug?

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

进去下图所示页面。点击”增多到Firefox”,然后点击”立即安装”,最后再次开动Firefox浏览器就可以产生安装。

澳门新浦京娱乐场网站 1

深信广大转业Web开拓专业的开荒者都听他们讲和使用过Firebug,但恐怕大多数人还不驾驭,其实它是多个在网页设计方面机能十二分强劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript进行周全的追踪和调节和测试。它是Firefox浏览器的2个插件,所以提议各位Web开垦者

Firebug是Firefox下的一款开辟类插件,现属于Firefox的世界级强力推荐插件之1。它集HTML查看和编辑、 Javascript调整台、网络处境监视器于一体,是开采JavaScript、CSS、HTML和Ajax的得力帮手。Firebug就像是一把精巧的瑞士联邦军刀,从各种分歧的角度解析Web页面内部的底细层面,给Web开采者带来极大的方便人民群众。那是壹款令人喜好的插件,假诺您在此之前从未有过接触过它,只怕在读书本文之后,会有一试的私欲。笔者在撰文此文的时候,正逢Firebug发表壹.0行业内部版,那必须说是种巧合。

本文首假使为初学者介绍一下Firebug的基本功效与哪些利用Firebug。由于自个儿水平与技术有限,在篇章中的恐怕会有成都百货上千谬误与遗漏,希望我们能包容和指正!

主面板

设置到位之后,在Firefox浏览器的地点后方就能够有二个小虫子的Logo澳门新浦京娱乐场网站 2。单击该Logo后就能够实行Firebug的调节台,也得以由此神速键<F1二>来开拓调整台。使用Ctrl F1二火速键能够使Firebug独立张开三个窗口而不占用Firefox页面尾巴部分的空中。

澳门新浦京娱乐场网站 3

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

垄断(monopoly)台面板:用于记录日志、大概浏览、错误提醒和实践命令行,同时也用于Ajax的调治将养;

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

CSS面板:用于查看全体页面上的CSS文件,能够动态地修改CSS样式,由于HTML面板中1度包涵了2个CSS面板,因此该面板将很少用到;

剧本面板:用于突显Javascript文件及其所在的页面,也得以用来展现Javascript的Debug调节和测试,包括1个子面板,分别是监察和控制、宾馆和断点;

DOM面板:用于展示页面上的全体目的;

网络面板:用于监视网络移动,能够扶协助调查看贰个页面包车型客车载入情状,包涵文件下载所攻下的时光和文件下载出错等信息,也可以用来监视Ajax行为;

Cookies面板:用于查看和调动cookie(供给设置下文财富中所提到的Firecookie)。


 

 

应用
Firebug插件纵然功用强大,可是它早已和Firefox浏览器无缝地结合在共同,使用简易直观。假若您担忧它会攻陷太多的系统能源,也足以一本万利地启用/关闭这一个插件,以至针对一定的站点开启那么些插件。

 

  调控台面板

一.垄断台面板概览

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

二.笔录日志

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

console.log:简单的记录日志;

console.debug:记录调节和测试音讯,并且附上行号的超链接;

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

console.info:在消息前体现新闻图标,并且附上行号的超链接;

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 sport1="篮球",sport2="羽毛球",sport三="网球"; console.log("%d个%s在玩游戏",count,kid); console.log(count,"个",kid,"在玩游戏"); console.log("%s擅长的活动有:",man,sport一,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轮廓等。越来越多材质能够访问.

四.面板内的子菜单

垄断(monopoly)台面板内有一排子菜单,分别是解决、保持、概略、全部等。

澳门新浦京娱乐场网站 6

“清除”用于破除调节高雄的内容。“保持”则是把调整台南的内容保留,固然刷新了依旧还留存。“全部”则是显得任何的音讯。后边的“错误”、“警告”、“音讯”、“调节和测试音讯”、“Cookies”菜单则是对持有开展了2个分类。

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

JavaScript

<button type="button" id="btn1">实行循环一</button> <button type="button" id="btn二">实践循环贰</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<一千;j ); } function f二(){ for(var i =0;i<一千;i ) for(var j=0;j<一千;j ); } document.getElementById("btn1").onclick=f一; document.getElementById("btn二").onclick=f2; document.getElementById("btn三").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

从上海教室中得以见到,出现了一行字,“概略采聚焦。再次点击“概略”查看结果。”,接着,依次单击“施行循环一”、“实施循环2”、“推行循环3”八个按键各三遍,一碗水端平复单击“概况菜单”,就能够看出如下图所示结果:

澳门新浦京娱乐场网站 9

能够看来Firebug展现出了尤其详细的告知。包含每一个函数的函数名、调用次数、占用时间的比重、占用时间、时间、平均时间、最时辰间、最大时间以及各州的文本的行数等音信。

5.Ajax调试

调整台面板也可用来Ajax调节和测试,在任其自然程度上得以替代互联网面板。举例笔者张开二个页面,能够在Firebug调整台看到本次Ajax的Http请求头音讯和服务器响应头新闻。如下图,它会来得出本次使用的Ajax的GET方法、地址、耗费时间以及调用Ajax请求的代码行数。最重视的是有四个标签,即参数、头新闻、响应、HTML、库克ies.首个标签用于查看传递给服务器的参数;第一个标签用于查看响应头音信和请求头消息;第一个标签用于查看服务器再次回到的内容;第多少个标签则是翻开服务器再次来到的HTML结构;第⑥个标签用于查占星应的Cookies。

澳门新浦京娱乐场网站 10

若是看不到任何新闻的产出,也许是将此功用关闭了,能够单击“调控台”旁边的下拉箭头,将“展现XMLHttpRequests”前面包车型大巴勾勾选上就能够。

澳门新浦京娱乐场网站 11

   

在装置好插件之后,先用Firefox浏览器打开须要测试的页面,然后点击右下方的深栗色开关或使用火速键F12唤出Firebug插件,它会将方今页面分成上下多个框架,如图一所示。

<!--[if !supportLists]-->1、 <!--[endif]-->安装

HTML面板

一.查看和改造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”按键后,用鼠标在网页上圈套选2个成分时,成分会被多少个浅橙褐的范围住,同时上边包车型大巴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

 

图壹:Firebug插件张开图示

Firebug是与Firefox集成的,所以大家首先要安装的事Firefox浏览器。安装好浏览器后,张开浏览器,选取菜单栏上的“工具”菜单,选取“附加软件”,在弹出窗口中式点心击右下角的“获取扩充”链接。在张开的页面包车型客车search输入框中输入“firebug”。等寻找结果出来后点击Firbug链接(图一-一灰黄圈住部分)进入Firebug的下载安装页面。

CSS、DOM和网络面板

澳门新浦京娱乐场网站,那二个面板相对于前方一个面板比较次要,CSS和DOM面板与HTML面板中右边的面板功用相似,但不及HTML面板灵活,因而一般选用得很少。

CSS面板特有的一个效率正是足以分级详细查看页面中内嵌以及动态导入的体裁。如下图所示:

澳门新浦京娱乐场网站 21

单击CSS面板后就能够独家查六柱预测应的体制。此处展开的体制都是经过格式化的,适合于学习CSS的代码格式和正式。

而在互连网面板中,相对有部分强有力的法力,比方展开某些网址首页,Firebug展现效果如下图所示:

澳门新浦京娱乐场网站 22

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

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

 相信广大从业Web开拓专业的开垦者都听他们说和应用过Firebug,但或者当先百分之五十人还不知晓,其实它是一个在网页设计方面机能万分强劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript进行周全的跟踪和调治将养。它是Firefox浏览器的1个插件,所以建议各位Web开辟者,要充足利用FireFox浏览器和Firebug插件进行平常的调节和测试专门的学业。本文选拔了拾三个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代码,能够在此间安装断点。比方在第伍行这句代码前边单击一下,那它前面就能够合世三个伟青的圆点,表示此处已经被安装了断点。此时,在右侧断点面板的断点列表中就涌出了刚刚设置的断点。假使想权且禁止使用有个别断点,能够在断点列表中去掉有个别断点的先头的复选框中的勾,那么此时左边手面板中相应的断点就从红浅灰褐产生了红天灰色了。

澳门新浦京娱乐场网站 25

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

澳门新浦京娱乐场网站 26

那时候JavaScript内容上方的澳门新浦京娱乐场网站 27多个按键已经变得可用了。它们分别代表“继续实施”、“单步进入”、“单步跳过”和“单步退出”。

继续试行<F八>:当通过断点来终止推行脚本时,单击<F八>就能够上涨试行脚本。

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

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

单步退出<shift F1一>:允许恢复脚本的实行,直到下二个断点停止。

单击“单步进入”按钮,代码会跳到下壹行,展现效果如下:

澳门新浦京娱乐场网站 28

澳门新浦京娱乐场网站 29

从上图能够看看,当鼠标移动到“lab”变量上时,就足以体现出它的原委是1个DOM成分,即“div#messageLabel”。

那会儿将右臂面板切换来“监察和控制”面板,这里列出了多少个变量,包含“this”指针的针对性以及“lab”变量。单击“ ”能够见见详细的音讯。展现如下:

澳门新浦京娱乐场网站 30

2.原则断点

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

澳门新浦京娱乐场网站 31

末段单击页面包车型大巴“Click Here”开关。能够窥见,脚本在“arr==5”这一个表明式为真时停下了,因而“5”以及随后的数字尚未出示到页面中。下图分别是例行机能和设置了标准断点之后的显得效果比较:

澳门新浦京娱乐场网站 32澳门新浦京娱乐场网站 33

  壹、使用Firebug能够找到页面中的任何内容

从图第11中学看出,Firebug有五个不可缺少的Tab开关,下文将注重介绍介绍这几地点的效果。
Console HTML CSS Script Dom Net
垄断(monopoly)台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络意况监视

<!--[if !vml]--><!--[endif]-->

图1-1

资源

急速键:按<F1贰>能够长足开启Firebug,假诺想获得完整的连忙键列表,能够访问.

主题素材:假使设置过程中相见了勤奋,能够查阅Firebug的Q&A,网站为.

Firebug插件:Firebug除了本人庞大的效果之外,还有基于Firebug的插件,它们用于扩充Firebug的效应。比如谷歌(Google)公司开销Page Speed插件,开垦人士能够运用它来评估他们网页的属性,并获取有关如何革新质量的建议。Yahoo集团费用的用于检查实验页面全部质量的YSlow和用来调试PHP的FirePHP。还有用于调试Cookie的Firecookie等。

  不晓得诸位有无遭遇过如此的景况,在一个复杂的HTML页面中,当你想找某些页面成分的实在对应的HTML时,你只幸好一大堆HTML代码中去探究,11分麻烦。有了Firebug,以往您只供给在页面中,用鼠标右键选中有些成分,然后在弹出的美食做法中,选取“查看元素”,立时就能在HTML页面代码中找到该因素对应的代码了,1贰分有利,如下图所示:

Console 控制台
调整台能够展现当前页面中的javascript错误以及警告,并提醒出错的公文和行号,方便调节和测试,这么些错误提示比起浏览器本人提供的谬误提醒特别详细且具有参考价值。而且在调度Ajax应用的时候也是专程有用,你可见在调控台里观察每二个XMLHttpRequests请求post出去的参数、 U牧马人L,http头以及回馈的内容,原本就好像在木鸡养到黑匣子里运行的先后被明晰地出示在您日前。

 

总结

通过本文的就学,读者能够精晓Firebug的基本功用。Firebug已经日趋变为一个调和平台,而不只是2个简约的Firefox扩张插件。学好Firebug能给现在的读书和行事提供一定的救助。

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

1 赞 3 收藏 1 评论

澳门新浦京娱乐场网站 34

 

象C shell或Python shell同样,你还是能在调控台北查看变量内容,直接运转javascript语句,就到底大段的javascript程序也能够科学生运动营并获得运维期的音信。

在页面中式点心击Install Now(图一-2)按键。

澳门新浦京娱乐场网站 35

支配台还有个至关心珍视要的服从即是翻开脚本的log, 在此以前您只怕习于旧贯了利用alert来打字与印刷变量,不过Firebug给大家带来了3个新对象 —— console.log, 最轻易易行的打字与印刷日志的语法是那样的:

 

 

console.log(”hello world”)

<!--[if !vml]--><!--[endif]-->

图1-2

  同样,也提供了更加高速的格局:只须要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中活动时,在Firebug调控新竹就立马显得移动时通过的HTML元素的代码:

假设您有一批参数需求结合在一起输出,能够写成那样:

 

 

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

在弹出窗口(图一-三)中等待3秒后单击“立刻安装”开关。

澳门新浦京娱乐场网站 36

Firebug的日志输出有多样可选的格式以及语法,以致足以定制彩色输出,比起单调的alert,显明越发方便,限于篇幅,这里不做详细表明,可是有志于进步debug作用的读者,能够到Firebug的官方站点(见附录)查看更详实的科目。

 

  2、可以使用Firebug修改HTML和CSS

图二: 在决定台里调节和测试javascript

<!--[if !vml]--><!--[endif]-->

图1-3

  通过Firebug,能够一向退换HTML,扩张HTML的习性,删除成分,扩充CSS样式及完成更加多效益,如下图:

澳门新浦京娱乐场网站 37

 

澳门新浦京娱乐场网站 38

查看和改变HTML
首先次看到Firebug强大的HTML代码查看器,就认为它特殊,相比较于Firefox自带的HTML查看器,它的功能强大了大多。 HTML

等候安装到位后会单击窗口(图一-四)中的“重启 Firefox”按键重新启航Firefox。

  在上航海用体育场地的菜单中能够精通看出,你能够对HTML成分进行丰富多彩的改造操作,方法是先点击HTML部分的代码,然后鼠标右键就可以在弹出的美食指南中进行操作。

首先你见到的是现已由此格式化的HTML代码,它有明晰的档次,你可以方便地辨识出每3个标签之间的隶属并行关系,标签的折叠功用能够扶助您聚焦精力分析代码。源代码上方还标志出了DOM的档期的顺序,如图3所示,它知道地列出了2个hml成分的parent、child以及root成分,同盟Firebug自带的CSS查看器使用,会给div css页面分析编写带来非常大的裨益。你还足以在HTML查看器中平昔修改HTML源代码,并在浏览器中第暂时间看到修改后的功效,光凭这点就能够让不少页面设计员至死不渝地成为Firebug的听众了。

 

  三、能够经过Firebug查看DOM成分和对XML举办操作

偶尔页面中的javascript会依靠用户的动作如鼠标的onmouseover来动态改造部分HTML成分的样式表或背景观,HTML查看器会将页面上更动的剧情也抓下来,并以深巴黎绿高棉亮标志,让网页的潜规则通透到底造成历史。

<!--[if !vml]--><!--[endif]-->

图1-4

  当展开2个HTML页通过Firebug查看HTML代码时,你能够同时点在调控面板中的DOM树,就能够以DOM的树型结构情势来看全部HTML的构造。而一旦您是开辟了八个XML文件,那么鼠标右键点XML文件中的任何多个因素,在弹出的菜系中同样能够选拔对XML举办有关操作,如下图:

利用Inspect检查功用,我们仍是可以用鼠标在页面中1分区直属机关接大选择一些区块,查六柱预测应的HTML源代码和CSS样式表,真正的做到所见即所得,假如您利用了表面编辑器修改了当前网页,能够点击Firebug的reload图片重新载入网页,它会持续追踪你此前用Inspect选中的区块,方便调节和测试。

 

澳门新浦京娱乐场网站 39

图3::HTML查看器

当Firefox重启完后大家能够在气象栏最右面开掘叁个石榴红圆形Logo( <!--[if !vml]-->澳门新浦京娱乐场网站 40<!--[endif]-->),那就象征Firebug已经设置好了。橄榄绿Logo表示Firebug未开启对当前网站的编辑撰写、调试和监测功用。而日光黄( <!--[if !vml]-->澳门新浦京娱乐场网站 41<!--[endif]-->)则意味着Firebug已张开对日前网址开展编写制定、调节和测试和监测的效劳。而藤黄Logo( <!--[if !vml]-->澳门新浦京娱乐场网站 42<!--[endif]-->)表示已展开对近年来网址实行编辑、调节和测试和监测的意义,而且检查到近年来页面有荒唐,当前Logo表示有多少个错误。

  4、使用Firebug调试Javascript代码

澳门新浦京娱乐场网站 43

 

  在Firebug调整台北,如若要奉行调节和测试Javascript代码,只要求首先将Script调整面版运维,然后在点击Console开关,在下拉菜单中挑选突显Javascipt及HTML错误(仍是能够让用户选拔显示越多的荒唐),接着在尾部会发觉出现>>>的箭头,在此间,你能够输入Javascipt代码,输入后,登时按回车键,就可以施行了,13分便利,如下图:

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

<!--[if !supportLists]-->2、 <!--[endif]-->开启或关闭Firebug

澳门新浦京娱乐场网站 44

现今的网页设计言必称div css,假若你是用table套出来的HTML页面,就得按那规矩重构贰次,不然显得你不够风尚!用div做出来的页面包车型地铁确能精简HTML代码,HTML标签减脂的结果正是CSS样式表的编写成了页面制作的本位。Firebug的CSS查看器不仅仅自下向上列出每1个CSS样式表的专属承继关系,还列出了每1个体制在哪些样式文件中定义。你能够在那些查看器中向来抬高、修改、删除一些CSS样式表属性,并在当前页面中央直机关接看到修改后的结果。

单击Firebug的图标恐怕按F1二键你会发觉页面窗口被分成了两有个别,上半部分是浏览的页面,下半部分则是Firebug的主宰窗口(图贰-一)。假设你不喜欢那样,能够按CT福特ExplorerL F12或在前面操作后单击右上角的上箭头开关,弹出贰个新窗口作为Firebug的支配窗口。

  三个小工夫是,在输入Javascipt的时候,还辅助使用tab键的活动完成提示作用,例如对于2个相当短的Javascipt函数,在没输入完的时候假设按tab键firebug就能支援您活动补充完整。

3个超人的施用就是页面中的二个区块地方显得某些不太适宜,它须要活动多少个象素。那时候用CSS调节和测试工具得以随心所欲编辑它的职位——你能够依据需求自由活动象素。
如图四中正在修改二个区块的背景象。

 

5、多次加载页面后Firebug会记得加载前的职责

晋升:假设你正在攻读CSS样式表的采取,不过总记不住常用的样式表有怎么样值,能够品尝在CSS调试器中选中贰个体裁表属性,然后用前后方向键来改换它的值,它会把只怕的值3个个遍历给您看。

<!--[if !vml]--><!--[endif]-->

图2-1

  无论你再次加载多少次页面,Firebug在每回加载页面后总会自个儿记得加载前页面所在的地方(比如你早已在浏览页面包车型地铁最底层,此时再加载页面,则新的页面加载后,依旧把你带到页面底部)。

图4: CSS查看器,能够平素改变样式表

 

 

澳门新浦京娱乐场网站 45

从图二-1中大家能够看看,因为大家张开Firebug的编写、调节和测试和监测功用,所以方今只有四个能够接纳的链接:“Enable Firebug”与“Enable Firebug for this web site”。倘诺您想对全数的网址实行编辑、调节和测试和检查评定,你能够点击“Enable Firebug”开启Firebug,则未来不管浏览别的网址,Firebug都地处活动状态,随时能够拓展编写制定、调试和检测。可是貌似的习于旧贯大家只是对和煦支付的网址开始展览编写制定、调节和测试和检查实验,所以我们只单击“Enable Firebug for this web site”开启Firebug就行了。

陆、使用$标识去便利访问变量

可视化的CSS尺标
小编们能够利用Firebug来查阅页面中某壹区块的CSS样式表,即便进一步开始展览右边Layout tab的话,它会以标尺的款式将方今区块占用的面积清楚地方统一规范识出来,准确到象素,更令人惊叹的是,你可见在那一个可视化的分界面中一向改换各象素的值,页面上区块的职位就能够随改动而调换。在页面中或多或少因素出现错位恐怕面积大于预料值时,该成作用够提供实用的提携,你能够籍此分析offset、margin、 padding、size之间的涉及,从而寻觅化解难点的章程。

翻开Firebug窗口(图贰-贰)后,我们能够看到窗口主要有八个区域,1个是功效区,二个是消息区。选取作用区第3行的两样标签,音信区的来得会有差异,Options的选项也会不一致,寻找框的索求格局也会不相同。

  在下边的第6点中,咱们关系了在>>>这些命令行下能够拓展Javascript的调节和测试,而除此以外三个技巧是能够使用如$一去访问曾经造访过的变量中的最终贰个,如此类推,能够利用$贰访问曾经走访过的变量中的倒数第二个。如下图:

图5:Firebug中的CSS标尺

 

澳门新浦京娱乐场网站 46

澳门新浦京娱乐场网站 47

<!--[if !vml]--><!--[endif]-->

图2-2

  7、Firebug会高亮度呈现修改过的内容

网络情况监视器

莫不有一天,你的业主照旧客户找到您,抱怨你制作的网页速度奇慢,你该怎么回复?你大概会说那恐怕是网络难题,或然是计算机配置难点,只怕是程序太慢,只怕直说是他俩的人品难点?不管怎么说,最终你可能被必要去消除那个有各样恐怕的标题。

互联网景况监视器能帮您消除那个艰辛难题。Firebug的互连网监视器同样是成效强大的,它能将页面中的CSS、javascript以及网页中援引的图纸载入所花费的岁月以矩状图展现出来,只怕在这里您能一把揪出拖慢了你的网页的罪魁,进而对网页进行调优,最终业主满足客户喜爱,你的饭碗也因而而坚实。

网络监视器还有一部分其余细节功效,举例预览图片,查看每三个外部文件乃至是xmlHttpRequests请求的http头等等。

图陆:互联网境况监视器
澳门新浦京娱乐场网站 48

 

  在Firebug中,只要您改改过页面中的内容,就能以高粱红高亮度彰显已经修改过的剧情,如下图:

Javascript调试器

这是多个很科学的javascript脚本调节和测试器,占用空间十分的小,不过单步调节和测试、设置断点、变量查看窗口2个居多。正所谓麻雀虽小,五脏俱全。

假定您有二个网址已经济建设成,然则它的javascript有品质上的标题依然不是太圆满,能够由此面板上的Profile来总结每段脚本运营的年月,查看毕竟是哪些语句实施时间过长,一步步革除难题。

图7:javascript调试器
澳门新浦京娱乐场网站 49

要关闭Firebug调控窗口单击功用区最右侧的关门Logo或按F1二键就行了。假若要关闭Firebug的编纂、调节和测试和监测功效,则须要单击成效区最右边的臭虫Logo,打开主菜单,选取“Disable Firebug”或“Disable Firebug for xxxxx”。

澳门新浦京娱乐场网站 50

DOM查看器

DOM(Document Object Model)里头包涵了大批量的Object以及函数、事件,在从前,你要想从中查到要求的从头到尾的经过,绝非易事,那好比你去了多个了不起的体育场地,想要找到几本名字不太对劲的小书,众多的选料会让您心中无数。而选取Firebug的DOM查看器却能造福地浏览DOM的内部结构,协理您连忙稳固DOM对象。双击一个DOM对象,就能够编辑它的变量或值,编辑的还要,你大概会发觉它还有自动落成作用,当你输入document.get之后,按下tab键就会补齐为 document.getElementById,相当有利。假诺你认为补齐得不够理想,按下shift tab又会苏醒原状。用了Firebug的 DOM查看器,你的javascript从此找到了促使的靶子,Web开垦恐怕就成了一件乐事。

图8: Dom查看器
澳门新浦京娱乐场网站 51

 

  八、监视Javascript的运作品质

小结

Firebug插件提供了一整套web开拓所供给的工具。从HTML的编写,到CSS样式表的吹捧调优,以及用javascript脚本开辟,亦大概Ajax应用,Firebug插件都会化为您的得力帮手。所谓工欲善其事,必先利其器。在Web二.0的时代,言必称Ajax,动辄便是用户体验提高,假使把Firebug工具用好,必能令你如鱼得水,将HTML、CSS、javascript整理得服服帖帖,从此成为web开辟中的专家级人物。

<!--[if !supportLists]-->3、 <!--[endif]-->Firebug主菜单

  在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使用详解6
  • 首当其冲无比的WEB开辟好助手FireBug(Firefox Plugin)
  • js之WEB开荒调试利器:Firebug 下载
  • FireBug 调节和测试JS入门教程 如何调治JS

 

澳门新浦京娱乐场网站 52
▲(点击图片查看大图)

单击功用区最右侧的臭虫Logo可张开主菜单(图叁-1),其注重作用描述请看表一。

9、Firebug庞大的互连网数据监视效率

 

  Firebug还提供了卓殊功能强大的互连网数据监成效。开辟者在支付web应用时,通常要调查各个HTTP请求和回答,在那地点Firebug的效应1二分有力。首先,只必要展开调节面板中的网络成效,然后在历次运转页面时,都得以明白看出种种HTTP的呼吁和HTTP回应的实际细节。如下图:

<!--[if !vml]--><!--[endif]-->

图3-1

澳门新浦京娱乐场网站 53
▲(点击查阅大图)

 

  在上海教室中,只要点每1个请求旁边的 号,就能够看出该请求的切切实实细节,如下图:

菜单选项

澳门新浦京娱乐场网站 54

说明

  能够见到,能看出HTTP的尾部的各个信息。一样,即使要看眼下页面中的比方图片,FLASH等因素的音信等,也得以由此上海教室去点不一致的选项卡去筛选查看,十分方便人民群众。

Disable Firebug

  10、使用Firebug的Log功能

闭馆/开启Firebug对全部网页的编辑、调试和检查实验作用

  在陈设页面时,日常要记录下页面的有的信息,今年,能够利用Firebug中的log日志功用,把一些音讯输出到firebug的控制高雄,那样就便于调节和测试了。Firebug提供了1个console对象,在插件加载的时候就登记到Javascript的运作情状中去了,能够在先后中一向动用。console对象提供了三个log方法,比方表达如下:

Disable Firebug for xxxxx

澳门新浦京娱乐场网站 55<script language="javascript" type="text/javascript"> 
澳门新浦京娱乐场网站 56 console.log('This is log message');  
澳门新浦京娱乐场网站 57 console.debug('This is debug message');  
澳门新浦京娱乐场网站 58  console.error('This is error message');  
澳门新浦京娱乐场网站 59澳门新浦京娱乐场网站firefox插件Firebug的应用教程,拾分钟学会前端调节和测试利器。  console.info('This is info message'); 
澳门新浦京娱乐场网站 60 console.warn('This is warning message');  
澳门新浦京娱乐场网站 61</script>

关闭/开启Firebug对xxxxx网址的编写制定、调节和测试和检测作用

   在Firefox中进行如下代码,会看出Firebug的调整台南出现如下新闻:

Allowed Sites

澳门新浦京娱乐场网站 62

安装允许编辑、调节和测试和检查评定的网址

  能够见到,各类等级的日志输出,都含有三个花团锦簇的图标,能给用户很明显的提醒。同时,console.log 还支持格式化字符串的输出,你能够用类似C语言中printf的语法来调用那一个函数:console.log(“%s is %d years old.”, “鲍勃”, 42)。

Text Size:Increase text size

  1一、能够在Firebug中调试程序

叠加消息区域展现文本的字号

  在Firebug调控台的的Javascript调控面板中,能够对页面中的Javascript进行调和,方法很简单,只须要在要调度的行的左手单击,就能产出断点了,之后请记住上面常件的神速键:

Text Size:Decrease text size

  (一)  F10 进入下壹行;
(二)  F八持续调节和测试;
(叁)  F1壹进入Javascript中的函数体调试;
(四)  Shift F1一跳出函数体。

缩减音讯区域显示文本的字号

澳门新浦京娱乐场网站 63

Text Size:Normal text size

  1二、在Firebug中得以设置带条件的断点

音讯区域以常规字体展现

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

Options:Always Open in New Window

澳门新浦京娱乐场网站 64

设置Firebug调节窗口恒久在新窗口张开

  总结

Show Preview tooltips

  Firefox搭配Firebug在web程序设计中,可谓是“双剑合壁”,作用强大,本文只是挑选了中间的1部分本领予以介绍,越多的请参见Firebug官网的介绍。

安装是还是不是出示预览提醒。

Shade Box Model

当前翻开情形为HTML,鼠标在HTML element标签上运动时,页面会相应在此时此刻标签展现地方显示叁个边框表示该标签范围。这么些选项的功力是安装是或不是用差别颜色背景表示标签范围。

Firebug Website..

打开Firebug主页。

Documentation..

打开Firebug文档页。

Discussion Group

打开Firebug讨论组。

Contribute

开垦捐助Firebug 页面。

表1

 

<!--[if !supportLists]-->4、 <!--[endif]-->控制台(Console)

单击功用区第3栏的“Console”标签可切换来调整台(图4-一)。调整台的作用是展现各样错误消息(可在Options里定义),显示脚本代码中内嵌的调整台调节和测试音信,通过命令行对脚本举行调节和测试,通过单击Profile对剧本实行品质测试。 调控台分五个区域,贰个是音讯区,1个是命令行,通过Options菜单的“Larger Command Line”可改动命令行地点。

 

<!--[if !vml]--><!--[endif]-->

图4-1

 

    Options菜单的选项请看表贰。

 

菜单选项

说明

Show JavaScript Errors

展现脚本错误。

Show JavaScript Warnings

来得脚本警告。

Show CSS Errors

显示CSS错误。

Show XML Errors

显示XML错误。

Show XMLHttpRequests

显示XMLHttpRequests。

Larger Command Line

将命令行展现从调控窗口尾部移动右侧,扩展输入区域。

表2

 

单击“Clear”开关可排除调整台的主宰消息。

 

<!--[if !supportLists]-->5、 <!--[endif]-->页面源代码查看功用

单击作用区第一栏的“HTML”标签可切换来源代码查看功效(图5-壹)。尽管Firefox也提供了查看页面源代码的意义,但它显得的只是页面文件自身的源代码,通过脚本输出的HTML源码是看不到。而Firebug则是所见即所得,是最后的源代码。

 

<!--[if !vml]--><!--[endif]-->

图5-1

 

我们来看3个例子,文件源代码如下:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

 <title>简单的例子</title>

       <meta http-equiv="content-type" content="text/html; charset=utf-8">

       <style>

              #div1{background:red;width:100px;height:100px;}

              #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}

              #div3{background:yellow;width:50px;height:50px;margin-left:25px;}

       </style>

</head>

<body scroll="no">

 <div id="div1">方块一</div>

 <div id="div2">方块二</div>

 <script>

    document.getElementById('div1').innerHTML ='<div id="div3">方块三</div>';

 </script> 

</body>

</html>

  

在例子中我们透过JavaScript在“div1”中进入了“div叁”,在Firefox中查看源代码你是看不到“div一”中包涵有代码“<div id="div3">``方块三</div>”的,可是Firebug中大家是足以看见的(图伍-第22中学选部分)。

 

<!--[if !vml]--><!--[endif]-->

图5-2

 

从图五-第11中学大家能够看到,消息区被分为了七个部分,左侧是显得源代码,左侧是一个功效区,能够从此处查看到HTML Element中的CSS定义、布局情况和DOM结构。

从图伍-第22中学我们得以看来,源代码按DOM结构分档期的顺序展现的,通过档次折叠功效,大家就足以很有益分析代码。在成效区的第二行还根据你的抉择,清晰的按子、父、根列出了当下源代码的等级次序(图伍-贰革命部分),单击各部分,则会立马转到该片段的源代码。

 

<!--[if !vml]--><!--[endif]-->

图5-3

 

在源代码上移动鼠标,页面就能够冒出四个半晶莹剔透的方框,提示当前鼠标所指源代码的来得区域,当接纳。在图伍-四中,鼠标正指向“div一”,而在页面中“div一”的突显区域上被三个半透明的方框遮盖了。

<!--[if !vml]--><!--[endif]-->

图5-4

若是您把“Inspect”按键按下,功用正好相反,在页面中活动鼠标,则当前突显区域的源代码会被加亮呈现出来。在图5-5中,我们可以观望鼠标指针正指向“方块二”,而在源代码中能够见到,“方块二”的源代码“<div id="div2">``方块二</div>”已被加亮显示(青莲部分)。借使您单击有个别彰显区域,则该区域的源代码会被入选。

 

<!--[if !vml]--><!--[endif]-->

图5-5

是还是不是很便利?方正是便宜,可是本身的源代码繁多,而且某个区域在页面中不方便人民群众鼠标钦定,如何做?不要紧,大家还有多个狠心武器,寻觅功效。譬如我们清楚有个别HTML Element的ID是“div贰”,但在深切的源代码中不佳找,在页面中鼠标也很难找到,那我们就在作用区的找寻框中输入“div二”,再看看源代码区域,“div二”被加亮显示出来了(图五-6水土褐部分)。在那一个轻松的事例可能看不出很好的作用,大家能够尝尝一下把“div一”先折叠起来,然后在找出框输入“div3”,你能够观察“div一”会自动举办,并将“div三”加亮展现,假诺还感觉不够理想,能够找3个源代码相比多的例证测试一下。

<!--[if !vml]--><!--[endif]-->

图5-6

 

除此而外通过按下“Inspect”开关,单击显示区域选拔源代码,大家还足以通过单击源代码中的HTML标识(起头或结束标志都得以)来采用。大家尝试一下把鼠标移动到HTML标识,会意识鼠标指针产生了手的形制,那表明我们能够通过单击采用该源代码。接纳源代码后,大家就足以经过左边的功用区查看、编辑和调弄整理它的CSS定义和盒子模型(CSS盒子模型请参阅相关表明,这里就不再赘言了),还有3个很好的职能正是当外部编辑器修改了源代码(没有删除该源代码,只是修改),我们在浏览重视新加载页面后,选用的源代码不会改变,大家能够很有利的观察源代码的扭转与成效。

有未有平常为调节和测试有个别页面效果在源代码编辑器和浏览器之间切换,壹次又1回的基础代谢而感觉到非常的慢?有了Firebug你就绝不再衰颓了。你能够一贯在源代码中开始展览编辑,然后查看效果。如若只是修改已经存在的性质,比方要修改“div二”的里边文件,则一贯将鼠标移动到文本下边,等鼠标指针换来“I”,单击就可以进行编辑了。其它已存在的质量和属性值也能够这么一直进行编辑。假诺要为某Element增多属性,请将鼠标移动到该Element上,等光标变为“I”的时候,单击鼠标右键,从菜单中采用“New Attribute..”,在呈现的编辑框中输入你要抬高的属性名称就能够了。

<!--[if !vml]--><!--[endif]-->

图5-7

 

<!--[if !vml]--><!--[endif]-->

图5-8

小编们尝试一下为“div二”扩张2个“onclick”属性,单击的结果是将“div贰”的显得文本修改为“单击”。把光标移动到“div2”上,然后单击鼠标右键,选拔“New Attribute..”(图5-7),在编辑框中输入“onclick”,最终按一下回车键(图5-捌),出现属性值输入框后,输入“this.innerHTML=’单击’”,回车后大家可以承接加多下3个属性,此次测试无需,所以按ESC停止大家的输入。大家来核算一下修改结果,单击页面“div2”的区域(图伍-玖),“div2”的来得文本已修改为“单击”了,而源代码也改成了。有未有开掘,“div2”被加亮显示了?这又是Firebug的二个效应。只要大家经过页面中的操作修改了Element的习性,Firebug就能够在源代码中经过加亮的格局提示当前操作修改那几个属性值。譬如大家单击某些链接修改了2个iframe里的src,那么这几个src的属性值就能够被加亮显示。 又举例说大家单击有个别链接修改了三个image里的图像,那么它的src属性值也会被加亮展现。大家得以经过Options菜单里的“Highlight Changes”设置是还是不是加亮呈现更改。而“Expand Changes”则是设置被改换的源代码折叠起来看不见时开始展览让它可知。而“Scroll Changes into view”则是源代码许多,被转移的源代码不在可视区域时,将被改成的源代码滚动到可视区域。

<!--[if !vml]--><!--[endif]-->

图5-9

 

偶然我们不单是要扩展1多少个属性,而是要做越多的改换,那怎么做呢?相当粗略,选择你要改变Element,然后单击成效区第贰行的“艾德it”按键或许直接将鼠标移动到要修改的Element上,单击鼠标右键,选取“艾德it HTML..”,那时候,源代码区域将切换来编辑状态,你能够随心所欲的改造你挑选的源代码了。我们品尝修改一下“div二”,将被修改展现文本修改回“方块二”,大家选拔“div二”,然后单击“艾德it”按键(图5-10),将呈现文本修改回“方块贰”,然后再次单击“艾德it”按键退出编辑状态,要是要放任修改,能够按ESC键退出。因为是所见即所得的,所以大家在退换的时候,页面会同时刷新呈现。

<!--[if !vml]--><!--[endif]-->

图5-10

壹旦要修改Element的CSS定义如何做?很简短,选拔该Element,然后在左边的窗口采用“Style”标签,这里显示的正是现阶段Element的CSS定义了。大家在这里能够对CSS定义实行增添、编辑、删除、禁止等操作。咱们品尝一下把“div二”的背景象禁止了看望。将鼠标移动到“background”那行(图五-1一),大家可以看来在那行的最右侧会有一个米色的禁止Logo,只要单击这几个禁止Logo,就足以禁止了那些CSS属性了。我们单击那个Logo看看效果,页面中的“div二”已经化为暗褐背景了,而禁止Logo也改成乌紫,而文本会则成为驼灰(图伍-1二),那表明已经禁止了“background”了。当然了,这一个操作也能够因此鼠标右键的“Disable XXXXX”来贯彻(XXXXX表示近日接纳的CSS属性)。我们重新单击禁止Logo,恢复生机“background”属性。我们此次要把“background”的颜色由浅紫蓝(blue)修改为蓝灰(green)。大家把鼠标移动到“background”属性值“blue”上(图伍-①三)。怎么会产出二个灰湖绿背景的四方?这是Firebug提供背景预览功用,让我们很直观的懂稳妥前背景是怎么着。如若背景是图形的话,展现的将是背景图片的缩略图。继续大家的操作,单击属性值,在产出的编辑框大校“blue”修改为“green”。好了,背景已经修改为灰湖绿了。以后的展现文本是左对齐的,小编想让它居中对齐,那亟需在CSS里加3个“text-align”的习性,值为“center”。请在CSS上单击鼠标右键,在菜单中采用“New Property..”,在编辑框中输入“te”,Firebug已通过自动完成成效帮大家输入“text-align”了(图伍-14),按Tab键或回车,在属性值中大家输入“c”,Firebug再一次帮大家自行完结了“center”(图5-1伍),按Tab键或回车完毕输入,假诺无需再三再四输入新属性,按ESC或单击鼠标撤废输入。文本“方块二”未来曾经居中展现了。如果忘记了某些属性值有那三个选用如何做?不要紧,在输入属性值的时候能够经过上、下箭头选拔大家需求的属性值。

在“Style”标签里大家能够接纳“Options”菜单里的“Show Computed Style”查看浏览器私下认可的作风定义。

 

<!--[if !vml]-->澳门新浦京娱乐场网站 65<!--[endif]-->

图5-11

 

<!--[if !vml]-->澳门新浦京娱乐场网站 66<!--[endif]-->

图5-12

 

<!--[if !vml]-->澳门新浦京娱乐场网站 67<!--[endif]-->

图5-13

 

<!--[if !vml]-->澳门新浦京娱乐场网站 68<!--[endif]-->

<!--[if !vml]-->澳门新浦京娱乐场网站 69<!--[endif]-->

图5-14

图5-15

页面设计中,我们偶尔最发烧的是怎么样?是盒子模型!为了调动二个Element的margin、border、padding和冲突地点,大家往往供给花不少技术去修改源代码,然后刷新页面查看效果。有了Firebug,你就足以轻巧回应了。我们将左侧的区域切换成“Layout”标签(图5-1陆),你会师到1个盒子模型,里面从外到里通过不相同的线和颜色划分出了offset、margin、border、padding和剧情多个区域,里面四个区域在种种边上都有3个数值,表示该方向上的调动值。大家先在左边选用“div二”,然后把鼠标分别运动到“Layout”里的两样区域(图5-一柒),然后小心一下页面,页面在顶部多了一条水平标尺,在左边多一条垂直标尺,而4条实线提醒出了近来鼠标提醒的区域实际地方,通过与标尺的交点能够驾驭该区域离页面展现区域左上角的偏移量(单位是px),当然我们也得以通过layout中的数字总括出那些偏移量。在图中,大家仍可以看来,在内容区域的外面还有2个不等颜色的区域,它们从里到外用差别颜色代表了padding、border、margin的地方和偏移量。只要将鼠标移动到分化区域,页面中的4条实线也会变动地点,提醒出页面中相应的区域。大家还足以通过修改Layout中的数值,对彰显效果进行调治。举个例子我们要将“div2”的从头到尾的经过彰显区域扩展到200×200,将鼠标移动最右侧的十0上,光标形成“I”后,单击鼠标,然后在输入框中输入200,按回车可承接修改高度值,输入200,回车后完毕修改。页面中的“div二”区域曾经增加到200×200了,而源代码也加码了“style="width: 200px; height: 200px;"”(图5-1八)。大家切换标签到“Style”,会开采多了“element.style {height:200px;width:200px;}”(图5-1玖),而CSS定义里面包车型客车中度和宽度都划了横线,表示不起成效了,“element.style”表示一向定义在Element源代码上的CSS属性。有时候某个Element会有同样的性质,也有自身特别的习性,而别树一帜的特性想写在Element的源代码上,就足以在Style里单击鼠标右键选择“艾德it Element Style..”进行增加。假若有意思味的话,大家能够尝尝修改“Layout”里的其它属性值,看看页面包车型大巴扭转,这里本身就不再1一表达了。

    假使不想在页面中浮现标尺和四条实线,能够不选拔“Options”菜单里的“Show Rules and Guides”。

 

<!--[if !vml]--><!--[endif]-->

图5-16

 

 

<!--[if !vml]--><!--[endif]-->

图5-17

 

<!--[if !vml]--><!--[endif]-->

图5-18

 

<!--[if !vml]--><!--[endif]-->

图5-19

 

在源代码呈现区域大家还是能透过鼠标右键复制源代码和展示内容,这里就不1一表明了。DOM的评释请看查看DOM结构壹节,两者是千篇一律的。在源代码区域中就算感到源代码展现太密,能够将“Options”菜单里的“Show 惠特e Space”选项展开,各个源代码块之间会用空白行隔断。要是要查看源代码的注释内容,请将“Options”菜单里的“Show Comments”选项展开。

这里要提醒大家须臾间,在HTML里调节和测试出科学的源代码和CSS后,别忘记将源代码和CSS的改变结果复制到你的源代码文件中,否则你的调治结果在页面刷新后会半途而废。切记!切记!

 

 

<!--[if !supportLists]-->6、 <!--[endif]-->查看CSS定义

将效能区第1行的标签切换来“CSS”,在这里大家能够查看页面中负有的CSS定义,包含链接的CSS文件。通过成效区的文本选拔开关能够选拔不相同的包括CSS的公文(图陆-一黑色圈住部分)。

 

<!--[if !vml]--><!--[endif]-->

图6-1

 

CSS的概念的编排这里就不再表达了,那一个能够参见HTML的“Style”操作。

“艾德it”按键功效和HTML的“艾德it”作用类似。

 

<!--[if !supportLists]-->7、 <!--[endif]-->脚本调节和测试

将功效区第二行的标签切换来“Script”,在此间我们能够对页面中有着的本子实行调节和测试,包括链接的剧本。和CSS同样,可以通过文件选取开关选取分歧的台本文件。

假定要在本子中安装一个断点,能够单击行号旁边的空白区域,那时会出现八个威尼斯绿的点表示在那边安装了断点(图7-1),当脚本运转到此会终止运转,等待你的操作。在左边的小窗口将标签切换来“Breakpoints”能够查看大家设置的具备断点(图7-二),单击左上角的checkbox能够让断点不起功效,若是要删减断点能够单击右上角的删除Logo。通过“Options”菜单的“Disable All Breakpoints”可最近禁止全部断点,而“Remove All Breakpoints”可去除全数断点。在断点标识的红点上单击右键还足以设置断点条件,在符合条件的时候才会停下脚本的实践。

<!--[if !vml]--><!--[endif]-->

图7-1

 

<!--[if !vml]--><!--[endif]-->

图7-2

 

下面大家来尝试一下断点的意义。首先在测试页脚本里扩展二个test的函数,函数的首要性操作是运作一个一千次的循环,将循环的参数值显示在“div2”里:

 

    function test(){

            for(var i=0;i<1000;i ){

                   document.getElementById('div2').innerHTML=i;

            }

        }

  

    在“div2”里扩充一个“onclick”属性,单击后实行test:

 

<div id="div2" onclick='test()'>方块二</div>

  

刷新页面,然后在“for(var i=0;i<1000;i ){”那行上设置叁个断点,并安装标准为“i=100”(图7-三),然后单击“div二”开始实践函数test。

 

<!--[if !vml]--><!--[endif]-->

图7-3

 

当脚本停下来后,大家将鼠标移动到变量“i”上,那时会产出叁个小方块,里面有三个数值,那正是变量“i“的脚下值(图7-4)。在剧本调节和测试的时候,你能够经过这几个措施很有益于的询问到当前变量的值。你还足以因而左边窗口的“Watch”标签查看到“i”的值(图7-伍)。

<!--[if !vml]--><!--[endif]-->

图7-4

 

<!--[if !vml]--><!--[endif]-->

图7-5

在“沃特ch”标签窗口我们得以经过“Options”菜单选用查看用户自定义属性(Show User-defined Properties)、用户自定义函数(Show User-defined Functions)、DOM属性(Show DOM Properties)、DOM函数(Show DOM Functions)和DOM常数(Show DOM Constants)。大家还足以经过单击“New watch expression…”(图7-陆淡金黄背景有个别)出席自个儿想追踪的原委。举例我们想跟踪一下“div二”的展现内容,就足以单击“New watch expression…”,到场“document.getElementById('div贰').innerHTML”,输入中可透过TAB键自动实现重点字的输入(图7-七)。假设不想追踪了,可单击最左边的去除Logo裁撤追踪。

<!--[if !vml]--><!--[endif]-->

图7-6

 

<!--[if !vml]--><!--[endif]-->

图7-7

 

剧本在断点结束后,我们就足以选取寻找框旁的伍个追踪按键进行代码跟踪了(图7-7)。第叁按键是后续运行程序,不再实践追踪,飞快键是F八。第四个开关是单步实施措施,每回施行一条语句,该方法在遇见函数调用时不进去调用函数内部开始展览追踪,飞快键是F10。第6个开关也是单步施行措施,每一次实行一条语句,但它遭受函数调用时会进入调用函数内部开始展览追踪,急速键是F1壹。当你进入调用函数内,想立即跳出来时,能够单击第伍个按键,该开关没有连忙键。

寻找框的遵循和HTML源代码查看是大同小异的,然则有贰个比不上,正是输入“#n”(n≥一),能够直接跳到剧本的第n行。

当试行脚本在“console”标签内呈现一个张冠李戴,而不当的提示行左侧出现叁个暗土黑的圆点时(图7-八),大家能够单击改红点在该行设置3个断点。

 

<!--[if !vml]--><!--[endif]-->

图7-8

咱俩得以由此“Script”标签的“Options”菜单的“Break on All Errors”选项设置每当脚本爆发错误时就半途而返脚本,进入调节和测试境况。

偶尔1个函数随机出现错误,你不容许每一回调用都去追踪叁次,而爆发错误的由来很恐怕是传递的参数错误,那时你能够由此追踪函数调用的职能去检查每一次调用函数时的参数情状。操作在函数脚本内单击鼠标右键,在菜单中选用“Log Calls to xxxxx”(xxxxx为函数名),然后可在“console”标签中可查看函数调用景况。

 

<!--[if !supportLists]-->8、 <!--[endif]-->查看DOM结构

将功效区第二行的价签切换来“DOM”可小编等级次序查看全部页面包车型地铁DOM结构。通过“Options”菜单可自定义选用查看用户自定义属性(Show User-defined Properties)、用户自定义函数(Show User-defined Functions)、DOM属性(Show DOM Properties)、DOM函数(Show DOM Functions)或DOM常数(Show DOM Constants)等故事情节。

由此双击你能够修改DOM里面包车型客车属性值。

 

<!--[if !supportLists]-->9、 <!--[endif]-->查看网络处境

作为开拓职员,是或不是会时时听到总监或客户抱怨页面下载太慢了?于是你就嘀咕是或不是脚本太多了?忘记压缩图片了?服务器太慢了?互联网太慢?确实是胃疼的事情。有了Firebug,你就足以很轻便的对那些难题张开分析和判别了。请将Firebug的当下标签切换成“Net”(图九-壹)。

 

<!--[if !vml]--><!--[endif]-->

图9-1

 

<!--[if !vml]--><!--[endif]-->

图9-2

 

从图中大家得以见见,页面中每1个下载文件都用贰个墨玉绿条表示它相对别的文件是从什么日期起初下载的,下载时间是稍微。在尾巴部分我们来看页面发送了略微个请求,下载总数是有点,有稍许是有缓存的,下载总共消费了有些日子等音讯。

尽管只想询问某同样文件的下载意况,你能够单击功能区第贰栏的公文分类按键过滤文件(图九-2铁红圈住区域1)。

将鼠标在文书中活动,就算是图表,大家能够看出图片的缩略图(图玖-2深红圈住区域三)。

设若彰显为深青黄的文书名,则代表该文件在服务器中不存在,无法下载,那样您就要检查一下文件的路子是或不是科学可能是还是不是上传了该文件(图九-2海军蓝圈住区域2)。

作者们能够拓展有些文件,查看它的HTTP头信息和重返结果的音信。纵然请求的是1个动态页面或XMLHttpRequest,则还足以查看提交的变量。通过翻看提交的变量和重回音信,大家得以很方便的调节和测试程序是不是科学提交了亟待的变量和重临了不错的数目。举例从图36中,我们得以看出向“topics-remote.php”发送了二个请求,提交的参数有“_dc”、“callback”、“limit”和“start”多少个,值分别为“118863744四千”、“stcCallback100一”、“二伍”与“0”,从这边大家得以很有利的明亮我们脚本操作提交的参数是不是科学。切换成“Response”页能够看到再次来到的结果(图九-三),在这里您可以对回到结果进行反省。若是你感到在此地查看结果很乱,你可以单击鼠标右键,在弹出菜单中选取“Copy Response body”复制结果到编辑器查看,你还足以采取“Open in New Tab”展开叁个新标签浏览。

 

<!--[if !vml]--><!--[endif]-->

图9-3

 

由此右键菜单你能够复制文件地方(Copy Location)、HTTP请求头消息(Copy Request Headers)和HTTP响应头新闻(Copy Response Headers)。

假诺不想利用该意义,能够选用Options菜单的“Disable Network Monitoring”关闭该成效。

 

<!--[if !supportLists]-->10、              <!--[endif]-->命令行调节和测试

在“Console”标签了有多少个命令行工具,大家得以在此间运维一些剧本对页面举办调节和测试。

我们在命令行中输入“document.getElementById('div二').innerHTML”看看效果(图拾-1),别忘了用TAB键达成急迅输加入关贸总协定组织键字。在消息区显示了当下“div二”的体现内容。

 

<!--[if !vml]--><!--[endif]-->

图10-1

 

要输入“document.getElementById”是或不是感觉很麻烦?这里有2个简短的艺术,用“$”符号取代“document.getElementById”,大家再在命令行中输入“$('div二').innerHTML”,然后看看结果,是相同(图10-二)。

 

<!--[if !vml]--><!--[endif]-->

图10-2

 

当您通过“Inspect”锁定了部分HTML Element时,你可以由此“$1”来拜访最终三个Element,依次类推,大家能够通过“$n”(n>一)访问依次倒序访问锁定的Element。

作者们来实施一下,刷新一下测试页面,然后按下“Inspect”开关,鼠标单击“方块二”,然后在按下“Inspect”按键,单击“方块一”。将firebug窗口切换回“Console”标签,然后输入“$壹”,回车后再输入“$二”,查看一下结实(图10-3),就是我们用锁定过的Element。

 

<!--[if !vml]--><!--[endif]-->

图10-3

 

在命令行还足以经过“$$(HTML 标识)”再次来到叁个Element数组。我们在测试页输入“$$(‘div’)”看看(图十-四)。大家再输入“$$(‘div’)[0]”看看(图10-五)。是还是不是很便利大家对HTML进行调试。

 

<!--[if !vml]--><!--[endif]-->

图10-4

<!--[if !vml]--><!--[endif]-->

图10-5

 

命令行的兼具尤其函数请看表三:

命令

说明

$(id)

通过id返回Element。

$$(selector)

经过CSS选拔器重回Element数组。

$x(xpath)

由此xpath表明式重返Element数组。

dir(object)

列出目的的具备属性,和在DOM标签页查看该目的的是平等的。

dirxml(node)

列出节点的HTML或XML的源代码树,和在HTML标签页查看改节点同样。

cd(window)

私下认可景况下,命令行相关的是顶层window对象,使用该命令可切换成frame里的window独享。

clear()

清空新闻展现区,和单击按键Clear作用雷同。

inspect(object[, tabName])

监视一个对象。tabName表示在至极标签页对该目的开始展览蹲点,可选值为“html”、“css”、“script”和“dom”。

keys(object)

回到由对象的性质名组成的数组。

values(object)

回来由对象的属性值组成的数组。

debug(fn)

在函数的第1行增添二个断点。

undebug(fn)

移除在函数第2行的断点。

monitor(fn)

钉住函数fn的调用。

unmonitor(fn)

不追踪函数fn的调用。

monitorEvents(object[, types])

钉住对象的风云。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。

unmonitorEvents(object[, types])

不追踪对象的风浪。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。

profile([title])

初阶对剧本举行质量测试,可选参数title将用作测试结果的标题。

profileEnd()

结束脚个性能测试。

表3

 

命令行有指令纪念作用,可透过上、下箭头键选取已经输入过的指令。

 

<!--[if !supportLists]-->11、              <!--[endif]-->在剧本文件中进入调节和测试命令

有未有对台本调节和测试中不时需求alert感觉腻烦?有了Firebug,你就足以放下alert了,因为Firebug有作用比alert更加强硬的console.log。

先让我们来认识一下console.log,在测试文件脚本区域大家输入一下代码:

 

console.log('Hello');

  

   刷新一下页面,将firebug切换来“console”标签看看(图1一-一),在消息区展现出了大家要出口的音讯“Hello”。当然了,单凭那些就说console.log有点夸张,大家修改一下test函数,把“document.getElementById('div二').innerHTML=i;”修改为:

 

console.log('当前的参数是:%d',i);

<!--[if !vml]--><!--[endif]-->

图11-1

  

   刷新页面后看看结果(图1一-二)。是否挺不错的?console.log能够象c语言的printf同样实现格式化输出。我们再在脚本区插手3个讲话:

 

console.log(2,4,window,test,document);

  

 

<!--[if !vml]--><!--[endif]-->

图11-2

  

刷新页面后看看结果(图1一-3)。console.log能够连接输出七个对象,而且只要目的是DOM、函数,还足以一贯点击去到该目的。

 

<!--[if !vml]--><!--[endif]-->

图11-3

  

就算您感到console.log输出的文件太枯燥,不可能表示出分歧的消息,那么您能够透过console.debug、 console.info、 console.warn和console.error来代表console.log,那些函数分别会用差别的背景颜色和文字颜色来显示音信。

小编们来探视测试一下这一个函数的出口,在本子中投入:

 

     console.debug('This is console.debug!');

     console.info('This is console.info!');

     console.warn('This is console.warn!');

     console.error('This is console.error!');

  

   刷新页面看看结果(图11-四)。

 

<!--[if !vml]--><!--[endif]-->

图11-4

  

有时候,为了更明白方便的查看输出音信,我们兴许必要将部分调试新闻进行分组输出,那么能够行使console.group来对新闻举办分组,在组消息输出完结后用console.groupEnd甘休分组。大家测试一下把刚刚的4个出口作为二个分组输出,修改代码为:

 

     console.group('开始分组:');

     console.debug('This is console.debug!');

     console.info('This is console.info!');

     console.warn('This is console.warn!');

     console.error('This is console.error!');

     console.groupEnd();

  

刷新页面看看结果(图1一-五)。在console.group中,大家还足以插足一个组标题“开始分组:”。假如要求,大家还能经过嵌套的点子,在组内再分组。

 

<!--[if !vml]--><!--[endif]-->

图11-5

  

突发性,大家必要写一个for循环列出一个对象的具有属性只怕有个别HTML Element下的持有节点,有了firebug后,我们无需再写那个for循环了,大家只必要接纳console.dir(object)或console.dirxml(element)就足以了。

在测试页中参预代码测试一下:

 

     console.dir(document.getElementById('div1'));

     console.dirxml(document.getElementById('div1'));

  

    结果请看图1一-陆和图11-7。

 

<!--[if !vml]--><!--[endif]-->

图11-6

<!--[if !vml]--><!--[endif]-->

图11-7

  

是不是想理解代码的运作速度?很轻便,使用console.time和console.timeEnd就足以。

修改一下test函数的代码,测试一下运作壹仟次巡回供给多少日子:

 

     function test(){

            console.time('test');

            for(var i=0;i<1000;i ){

                   document.getElementById('div2').innerHTML=i;

                   //console.log('当前的参数是:%d',i);

            }

            console.timeEnd('test');

        }

  

刷新页面,单击“方块2”,看看结果(图1一-八)。在这里要注意的是console.time和console.timeEnd里的参数要1致才会有不错的出口,而该参数就是消息的标题。

 

<!--[if !vml]--><!--[endif]-->

图11-8

  

是不是想领悟有个别函数是从何地调用的?console..trace可协理大家实行追踪。在test函数的尾声插手:

 

            console.trace();

  

刷新页面,单击“方块贰”,看看结果(图1一-九)。结果展现是在坐标(九七,18七)的鼠标单击事件施行了test函数,而调用的脚本是在simple.html文件里的第二行。因为是在HTML里面包车型地铁轩然大波调用了test函数,所以显得的行号是第二行。假使是本子,则会显得调用脚本的行号,通过单击能够直接去到调用行。

 

<!--[if !vml]--><!--[endif]-->

图11-9

  

假使想在本子有些地点设置断点,能够在剧本中输入“debugger”作为一行。当脚本施行到那1行时会截止实施等待用户操作,那时候能够因而切换来“Script”标签对台本实行调节和测试。

    Firebug还有任何的局地调弄整理函数,这里就不1一做牵线,有意思味能够友善测试。表四是装有函数的列表:

函数

说明

console.log(object[, object, ...])

向决定台出口贰个音信。可以输入七个参数,输出将已空格分隔各参数输出。

首先参数可以包涵格式化文本,举个例子:

console.log(‘这里有%d个%s’,count,apple);

字符串格式:

%s :字符串。

%d, %i:数字。

%f: 浮点数。

%o -超链接对象。

console.debug(object[, object, ...])

向决定台出口3个新闻,音讯蕴涵贰个超链接链接到输出地点。

console.info(object[, object, ...])

向调节台出口1个带新闻Logo和背景颜色的音讯,新闻包涵3个超链接链接到输出地方。

console.warn(object[, object, ...])

向决定台出口贰个带警告Logo和背景颜色的新闻,新闻包罗一个超链接链接到输出地方。

console.error(object[, object, ...])

向决定台出口二个带错误Logo和背景颜色的音信,音讯包罗叁个超链接链接到输出地点。

console.assert(expression[, object, ...])

测试1个意味是不是为true,假若为false,提交三个不等消息到调整台。

console.dir(object)

列出目的的具有属性。

console.dirxml(node)

列出HTML或XML Element的XML源树。

console.trace()

输出货仓的调用入口。

console.group(object[, object, ...])

将音信分组再出口到调节台。通过console.groupEnd()截至分组。

console.groupEnd()

得了分组输出。

console.time(name)

创设一个称呼为name的机械漏刻,总结代码的实践时间,调用console.timeEnd(name)结束测量时间的装置并出口施行时间。

console.timeEnd(name)

停下名字为name的放大计时器并出口奉行时间。

console.profile([title])

始于对台本举行品质测试,title为测试标题。

console.profileEnd()

得了品质测试。

console.count([title])

算算代码的实践次数。titile作为出口标题。

表4

 

<!--[if !supportLists]-->12、              <!--[endif]-->在IE中使用Firebug

Firebug是Firefox的一个扩大,可是本身习于旧贯在IE中调和小编的页面如何做?假设在页面脚本中进入console.log()将调节和测试消息写到Friebug,在IE中一定是投石问路错误的,如何做?不用挂念,Frirebug提供了Frirbug Lite脚本,能够插入页面中模拟Firebug调控台。

咱俩能够从一下地方下载firebug lite:

 

然后在页面中进入:

 

<script language="javascript" type="text/javascript" src="/路径/firebug.js"></script>

  

    假诺您不想在IE中模拟Friebug调节台,只是不期待console.log()脚本现身错误音信,那么在页面中进入一下语句:

 

<script language="javascript" type="text/javascript" src="/路径/firebugx.js"></script>

  

若果您不想安装Firebug Lite,只是想制止脚本错误,那么能够在剧本中参与以下语句:

 

if (!window.console || !console.firebug)

{

    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",

    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

 

    window.console = {};

    for (var i = 0; i < names.length; i)

        window.console[names[i]] = function() {}

}

  

我们将firebug.js参与到测试页面中,然后展开IE,加载页面。页面加载成功后,大家按下F1二键就足以打开调节台了。每一遍页面刷新后,你都要按F1二键展开调节台,是否很烦?若是不想那么,就在html标签中进入“debug=’true’”,举例:

 

<html debug="true">

  

   在Friebug Lite中也有命令行,然而意义没那么强。

 

<!--[if !supportLists]-->13、 <!--[endif]-->快速键和鼠标操作

大局操作

打开Firebug窗口

F12

关闭Firebug窗口

F12

在新窗口展开Firebug

Ctrl F12

往前切换标签

Ctrl `

将光标移到命令行

Ctrl Shift L

将光标移到寻觅框

Ctrl Shift K

进入Inspect模式

Ctrl Shift C

开始展览JavaScript品质测试

Ctrl Shift P

重复实践最后一条命令行命令

Ctrl Shift E

HTML标签

编纂属性

单击属性名或值

编排文本节点

单击文本

编辑Element

双击Element标记

移到路线里的下三个节点

Ctrl .

移到路径里的上贰个节点

Ctrl ,

HTML编辑

完了编写制定

Return

注销编辑

Esc

移到下三个区域

Tab

移到上三个区域

Shift Tab

HTML Inspect 模式

取消Inspect

Esc

Inspect 父节点

Ctrl Up

Inspect 子节点

Ctrl Down

Script标签

承袭运转

F5

 

Ctrl /

单步试行(Step Over)

F10

 

Ctrl '

单步执行(Step Into)

F11

 

Ctrl ;

剥离函数(Step Out)

Shift F11

 

Ctrl Shift ;

安装断点

单击行号

禁绝断点

在行号上Shift Click

编辑断点条件

在行号上Right-Click

运维到当下行

在行号上Middle-Click

 

在行号上Ctrl Click

移到仓库中的下一个函数

Ctrl .

移到宾馆中的上一个函数

Ctrl ,

将主旨切换来Scripts菜单

Ctrl Space

将难点切换成沃特ch编辑

Ctrl Shift N

DOM 标签

编纂属性

双击在空白

移到路线中下贰个指标

Ctrl .

移到路径中上三个目的

Ctrl ,

DOM 和Watch编辑

终止编辑

Return

注销编辑

Esc

自动达成下1个属性

Tab

电动完成上2个性质

Shift Tab

CSS标签

编辑属性

单击属性

插入新属性

双击空白处

挪动大旨到Style Sheets菜单

Ctrl Space

CSS编辑

完了编写制定

Return

注销编辑

Esc

移到下1个区域

Tab

移到上多个区域

Shift Tab

按升幅一扩张数值

Up

按上升的幅度二回落数值

Down

按上升的幅度10充实数值

Page Up

按升幅十调整和减弱数值

Page Down

机动完结下二个首要字

Up

机关完结上多少个要害字

Down

Layout标签

编辑值

单击值

Layout编辑

做到编写制定

Return

撤除编辑

Esc

移到下2个区域

Tab

移到上四个区域

Shift Tab

按升幅壹充实数值

Up

按上涨的幅度壹滑坡数值

Down

按升幅十一日增数值

Page Up

按升幅10调减数值

Page Down

电动实现下二个根本字

Up

活动实现上2人命关天字

Down

命令行 (小)

机动完结上二特质量

Tab

机关实现下二性情格

Shift Tab

执行

Return

Inspect结果

Shift Return

张开结果鼠标右键菜单

Ctrl Return

命令行 (大)

执行

Ctrl Return

 

 

<!--[if !supportLists]-->13、              <!--[endif]-->总结

就是想不到,Firebug居然有那么多好功用竟然是本身不通晓。通过写本篇小说,才认真的刺探和读书了叁次Firebug,越学越觉获得它的威力。然则笔者学的也只是轻描淡写,还有越多的功效和技能必要在平时的利用中国和东瀛益储存,由此那篇文章只是二个简短的介绍,还有多数事物是尚未涉嫌到的,而且因为自个儿自家水平与技术有限,所以文中会有许多谬误与遗漏,希望大家能多多原谅与指正!感谢!

 
事例最后源代码:

澳门新浦京娱乐场网站 70<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ";
澳门新浦京娱乐场网站 71<html debug='true'>
澳门新浦京娱乐场网站 72<head>
澳门新浦京娱乐场网站 73  <title>轻松的例子</title>
澳门新浦京娱乐场网站 74    <meta http-equiv="content-type" content="text/html; charset=utf-8">
澳门新浦京娱乐场网站 75澳门新浦京娱乐场网站 76    <style>
澳门新浦京娱乐场网站 77澳门新浦京娱乐场网站 78        #div1{background:red;width:100px;height:100px;}
澳门新浦京娱乐场网站 79澳门新浦京娱乐场网站 80        #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}
澳门新浦京娱乐场网站 81澳门新浦京娱乐场网站 82        #div3{background:yellow;width:50px;height:50px;margin-left:25px;}
澳门新浦京娱乐场网站 83    </style>
澳门新浦京娱乐场网站 84<script language="javascript" type="text/javascript" src="firebug/firebug.js"></script>
澳门新浦京娱乐场网站 85</head>
澳门新浦京娱乐场网站 86<body scroll="no">
澳门新浦京娱乐场网站 87  <div id="div1">方块一</div>
澳门新浦京娱乐场网站 88  <div id="div2" onclick='test()'>方块二</div>
澳门新浦京娱乐场网站 89澳门新浦京娱乐场网站 90  <script>
澳门新浦京娱乐场网站 91      document.getElementById('div1').innerHTML ='<div id="div3">方块三</div>';
澳门新浦京娱乐场网站 92澳门新浦京娱乐场网站 93/*      console.log('Hello');
澳门新浦京娱乐场网站 94      console.log(2,4,window,test,document);
澳门新浦京娱乐场网站 95      console.group('开端分组:');
澳门新浦京娱乐场网站 96      console.debug('This is console.debug!');
澳门新浦京娱乐场网站 97      console.info('This is console.info!');
澳门新浦京娱乐场网站 98      console.warn('This is console.warn!');
澳门新浦京娱乐场网站 99      console.error('This is console.error!');
澳门新浦京娱乐场网站 100      console.groupEnd();*/
澳门新浦京娱乐场网站 101//      console.dir(document.getElementById('div1'));
澳门新浦京娱乐场网站 102//      console.dirxml(document.getElementById('div1'));
澳门新浦京娱乐场网站 103      
澳门新浦京娱乐场网站 104澳门新浦京娱乐场网站 105      function test(){
澳门新浦京娱乐场网站 106          console.time('test');
澳门新浦京娱乐场网站 107澳门新浦京娱乐场网站 108          for(var i=0;i<1000;i ){
澳门新浦京娱乐场网站 109              document.getElementById('div2').innerHTML=i;
澳门新浦京娱乐场网站 110              //console.log('当前的参数是:%d',i);
澳门新浦京娱乐场网站 111          }
澳门新浦京娱乐场网站 112          console.timeEnd('test');
澳门新浦京娱乐场网站 113          console.trace();
澳门新浦京娱乐场网站 114      }
澳门新浦京娱乐场网站 115      
澳门新浦京娱乐场网站 116  </script>  
澳门新浦京娱乐场网站 117</body>
澳门新浦京娱乐场网站 118</html>

 

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站firefox插件Firebug的应用教程