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

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

原版的书文出处：
惟吾德馨（@阿伦_Bryant）

　　三个小本事是，在输入Javascipt的时候，还协助使用tab键的活动完毕提示效率，举例对于一个相当短的Javascipt函数，在没输入完的时候假设按tab键firebug就能够赞助您活动补充完整。

可视化的CSS尺标
我们得以应用Firebug来查看页面中某豆蔻梢头区块的CSS样式表，假诺越来越张开右边Layout
tab的话，它会以标尺的款型将日前区块占用的面积清楚地方统一标准识出来，正确到象素，更令人惊叹的是，你可以见到在这里个可视化的分界面中直接修改各象素的值，页面上区块的职分就能够随退换而生成。在页面中有些因素出现错位或许面积当先预料值时，该意义能够提供实用的赞助，你能够籍此剖析offset、margin、
padding、size之间的涉嫌，进而搜索消除难点的办法。

图5-12

资源

快速键：按<F12>能够非常的慢开启Firebug，假若想获得完整的快速键列表，可以访谈.

标题：假如设置进程中相见了不便，能够查看Firebug的Q&A，网站为.

Firebug插件：Firebug除了小编强大的法力之外，还应该有基于Firebug的插件，它们用于扩张Firebug的机能。比如谷歌（Google）企业开采Page
Speed插件，开垦职员能够使用它来评估他们网页的属性，并拿走有关如何改正质量的提出。Yahoo集团开采的用于检测页面全体品质的YSlow和用来调节和测量试验PHP的FirePHP。还会有用于调试Cookie的Firecookie等。

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

图3:：HTML查看器

HTML面板

1.查看和修改HTML代码

Html面板的刚劲之处便是能查看和修改HTML代码，何况那么些代码都是经过格式化的。下边以本人的贰个浏览器主页来做批注。

在页面深紫红色部分代表成分本人，清水蓝表示padding部分，苹果绿表示margin部分。相同的时间可以实时地加上、修改和删除HTML节点以至品质，如下图所示。别的，单击script节点还能直接查看脚本，此处的台本无论是内嵌在HTML中仍旧表面导入的，都得以查阅到。一样那也适用于<style>标签内嵌只怕导入的CSS样式和动态创制HTML代码。

在HTML调整台的侧边能够看看整个页面当前的文书档案结构，能够通过单击“+”来扩充。当单击相应的因素时，右侧面板中就能够显得出近些日子因素的样式、布局甚至DOM音信。而当光标移动到HTML树中相应成分上时，上边页面中相应的因素将会被高亮展现。

比方说，将光标移动到叁个<P>标签上，展现效果如下图所示：

在HTML调控台的侧边能够阅览任何页面当前的文书档案结构，能够通过单击“+”来举行。当单击相应的要素时，右右侧板中就能来得出脚下因素的体制、布局以至DOM音讯。而当光标移动到HTML树中相应元素上时，上边页面中相应的要素将会被高亮展现。

比如，将光标移动到一个<P>标签上，展现效果如下图所示：

2.查看(Inspect)

应用查看(Inspect)成效，能够高速地搜寻到有个别成分的HTML结构，如图：

当单击”Inspect”按键后，用鼠标在网页被骗选一个要素时，元素会被一个水晶色的局面住，同时下边包车型地铁HTML面板中相应的HTML树也会展开并且高亮彰显。再度单击后就可以退出该情势，何况底部的HTML树也维持在这里个意况。通过那么些意义，能够急迅搜索页面内的因素，调试和查找相应代码极其常有利。刷新网页后，页面展现的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”按键能够用来直接编辑选中的HTML代码，而背后显示的是当前因素在全体DOM中的结构路线。

3.翻看DOM中被剧本更换的片段

因而JavaScript来退换样式属性的值能够实现都部队分动画片效果。展开页面后，利用查看(Inspect)成效来抉择相应的HTML代码，举个例子，选中“要闻”，如下图所示：

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

因而上海教室能够观望，HTML查看器会将页面上改动的从头到尾的经过页记录下来，并以淡樱桃红高亮代表。有了那么些职能，网页的潜规则将干净成为历史。大家能够动用该意义查看别的网址的卡通片效果是怎样达成的。

4.翻看和更动成分的体裁

在左侧的体制面板中，显示了此元素当前具有的体裁。全部的体裁都能够实时地剥夺和修改，如下图所示，通过在”text-align:center”前单击会冒出禁止使用的符号，那样就能够禁止使用此法则。通过一直在体制value值上单击就足以修改。

单击“布局”面板就能够看出此因素具体的布局属性，那是贰个标准的盒模型。通过“布局”面板，能够非常轻便地观望元素的偏移量、外边距、边框、内边距和因素的冲天、宽度等音讯，如下图所示：

5.查看DOM的信息

单击“DOM”面板后可以看来此因素的详细的DOM音信甚至函数和事件，如下图所示：

　　不亮堂诸位有无遭逢过如此的状态，在二个繁琐的HTML页面中，当您想找有些页面成分的实在对应的HTML时，你只可以在一大堆HTML代码中去寻找，拾贰分麻烦。有了Firebug，现在您只需求在页面中，用鼠标右键选中有个别成分，然后在弹出的菜谱中，选用“查看成分”，立刻就能够在HTML页面代码中找到该因素对应的代码了，十一分福利，如下图所示：

什么是Firebug
从事了数年的Web开荒职业，越来越感到以往对WEB开垦有了更加高的须求。要写出杰出的HTML代码；要编写制定精致的CSS样式表展现各样页面模块；要调治javascript给页面扩展部分更活泼的因素；要运用Ajax给客户带来更加好的心得。二个卓绝的WEB开拓人士要求照看更加多层面，才干交出如日方升份同样出彩的作业。为帮助广大正处在Web2.0洪流中的开荒人士，在此边为我们介绍百废俱兴款轻便灵活的助手开垦工具。

按升幅10减小数值

CSS、DOM和网络面板

那3个面板相对于前方2个面板比较次要，CSS和DOM面板与HTML面板中右边的面板功用相似，但不及HTML面板灵活，由此日常选择得很少。

CSS面板特有的二个功力正是能够分级详细查看页面中内嵌以致动态导入的体裁。如下图所示：

单击CSS面板后就足以分级查占星应的体制。此处张开的体裁都以因而格式化的，切合于上学CSS的代码格式和专门的学业。

而在网络面板中，相对有大器晚成对强盛的意义，譬喻展开某些网址首页，Firebug彰显效果如下图所示：

该页面能够监视每风流倜傥项成分的加载情状，富含剧本，图片等的轻重以至加载用时等，对于页面优化有着非常首要的意思。

除此以外，顶端还是可以分类查看成分的HTML、CSS、JS等的加载景况，使深入分析越来越灵活。

　　在Firebug中，还足以设置带条件推断的断点，如下图：

console.log(”hello world”)

　　调整台面板

1.操纵台面板大概浏览

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

2.记下日志

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

console.log:轻易的记录日志；

console.debug：记录调节和测验新闻，而且附上行号的超链接；

console.error：在音信前展现错误Logo，并且附上行号的超链接；

console.info：在音讯前显示信息Logo，並且附上行号的超链接；

console.warn：在纤弱钱展现警示Logo，并且附行号的超链接。

在空白的html页面中，向<body>标签中加入<script>标签，代码如下：

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。

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

那个效果相近于C语言中的语法，能够在console记录日志的办法里应用。

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

何况，那个函数辅助四个变量。代码如下：

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>

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

Firebug调控台还提供了其余功用，比如检验函数实行时间、音讯分组、测验驱动、追踪、计数以致查看Javascript概略等。越来越多材质能够访谈.

4.面板内的子菜单

支配台面板内有一排子菜单，分别是祛除、保持、轮廓、全体等。

“清除”用于破除调节新竹的内容。“保持”则是把调控桃园的内容保留，就算刷新了还是还留存。“全体”则是展现任何的新闻。后面包车型地铁“错误”、“警报”、“音讯”、“调节和测量检验音信”、“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<一千;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<一千;i++) for(var j=0;j<壹仟;j++); } </script>

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>

开荒页面，显示四个开关：

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

从上海教室中得以观看，出现了扶摇直上行字，“轮廓收罗中。再次点击“概略”查看结果。”，接着，依次单击“试行循环1”、“实行循环2”、“试行循环3”四个按键各一次，同仁一视复单击“轮廓菜单”，就可以看出如下图所示结果：

能够见到Firebug呈现出了十一分详尽的报告。富含各样函数的函数名、调用次数、占用时间的比例、占用时间、时间、平均时间、最小时间、最大时间以至外市的文本的行数等消息。

5.Ajax调试

支配台面板也可用于Ajax调试，在自然水准上得以代表网络面板。举例笔者展开三个页面，能够在Firebug调节台看见此次Ajax的Http必要头音讯和服务器响应头音讯。如下图，它会展现出此番使用的Ajax的GET方法、地址、耗费时间以致调用Ajax央浼的代码行数。最关键的是有5个标签，即参数、头音信、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数；第叁个标签用于查看响应头新闻和乞求头消息；第多少个标签用于查看服务器再次来到的剧情；第多少个标签则是翻开服务器再次回到的HTML结构；第四个标签用于查占星应的Cookies。

若果看不到任何音信的产出，可能是将此成效关闭了，能够单击“调节台”旁边的下拉箭头，将“突显XMLHttpRequests”后面包车型客车勾勾选上就能够。

▲（点击图片查看大图）

从图第11中学见到，Firebug有6个重大的Tab开关，下文将入眼介绍介绍这几方面包车型客车成效。
Console HTML CSS Script Dom Net
决定台 Html查看器 Css查看器脚本条时代 Dom查看器互联网情况监视

Tab

主面板

安装到位之后，在Firefox浏览器的地址后方就能够有贰个小虫子的Logo。单击该Logo后就可以进行Firebug的调控台，也得以由此急速键<F12>来开采调控台。使用Ctrl+F12火速键能够使Firebug独立展开贰个窗口而不占用Firefox页面尾部的空中。

从上海体育场合中得以见到，Firebug包含7个面板：

决定台面板：用于记录日志、大概浏览、错误提醒和实施命令行，同不常候也用于Ajax的调整；

HTML面板：用于查看HTML元素，能够实时地编辑HTML和改造CSS样式，它包含3个子面板，分别是样式、布局和DOM面板；

CSS面板：用于查看全体页面上的CSS文件，能够动态地修改CSS样式，由于HTML面板中已经包含了叁个CSS面板，由此该面板将少之又少用到；

本子面板：用于展现Javascript文件及其所在的页面，也能够用来突显Javascript的Debug调试，蕴涵3个子面板，分别是监察和控制、货仓和断点；

DOM面板：用于展现页面上的具有目的；

网络面板：用于监视网络移动，可以襄协助调查看一个页面包车型地铁载入景况，包含文件下载所据有的岁月和文件下载出错等音信，也得以用来监视Ajax行为；

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

　　当展开三个HTML页通过Firebug查看HTML代码时，你能够同期点在调控面板中的DOM树，就能够以DOM的树型结构情势来看任何HTML的组织。而只要您是开采了二个XML文件，那么鼠标右键点XML文件中的任何三个要素，在弹出的美食指南中千篇生机勃勃律能够选择对XML举行连锁操作，如下图：

Tab

　　脚本面板

剧本面板不仅可以够查阅页面内的台本，何况还会有强盛的调度功用。

在本子面板的出手有“监控”、“货仓”和“断点”多个面板，利用Firebug提供的装置断掉的效果与利益，能够很便利地调节和测量检验程序，如下图所示：

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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

</body>

</html>

运作代码后方可看看下图所示效果。图中加粗并有颜色的行号表示此处为JavaScript代码，能够在这里处安装断点。举例在第6行那句代码前面单击一下，那它前面就能够冒出二个古铜黑的圆点，表示此处已经棉被服装置了断点。此时，在右臂断点面板的断点列表中就应际而生了刚刚设置的断点。假设想一时禁止使用有些断点，能够在断点列表中去掉有些断点的眼下的复选框中的勾，那么此时右边手面板中相应的断点就从红蓝紫产生了红法国深橙了。

设置完断点之后，大家就能够调节和测验程序了。单击页面中的“Click
Here”开关，能够见到剧本甘休在用谈草绿底色标出的那如日方升行上。此时用鼠标移动到某些变量上就可以显示此时以此变量的value。展现效果如下：

此刻JavaScript内容上方的多个开关已经变得可用了。它们各自表示“继续实践”、“单步步向”、“单步跳过”和“单步退出”。

继续实践<F8>：当通过断点来终止施行脚本时，单击<F8>就能过来推行脚本。

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

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

单步退出<shift+F11>：允许复苏脚本的推行，直到下多个断点结束。

单击“单步步入”按键，代码会跳到下后生可畏行，彰显效果如下：

从上海体育场所能够见见，当鼠标移动到“lab”变量上时，就可以来得出它的内容是八个DOM成分，即“div#messageLabel”。

这会儿将右侧边板切换成“监察和控制”面板，这里列出了几个变量，包罗“this”指针的对准以致“lab”变量。单击“+”能够看见详细的音讯。呈现如下：

2.原则断点

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

最后单击页面包车型大巴“Click
Here”按键。能够窥见，脚本在“arr==5”那个表达式为真时停下了，由此“5”甚至将来的数字还没出示到页面中。下图分别是健康机能和设置了尺度断点之后的显得效果相比较：

　　7、Firebug会高亮度展现修改过的剧情

图4: CSS查看器，可以一贯修改样式表

通过id返回Element。

总结

因而本文的就学，读者能够明白Firebug的基本成效。Firebug已经慢慢形成二个调剂平台，而不只是二个轻松的Firefox扩张插件。学好Firebug能给现在的读书和做事提供一定的帮忙。

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

1 赞 3 收藏 1
评论

　　无论你重新加载多少次页面，Firebug在历次加载页面后总会本人记得加载前页面所在的岗位(比方你早就在浏览页面包车型地铁平底，此时再加载页面，则新的页面加载后，还是把你带到页面尾巴部分)。

当今的网页设计言必称div+css，假诺您是用table套出来的HTML页面，就得按那规矩重构贰回，不然显得你非常不够前卫！用div做出来的页面包车型地铁确能轻松HTML代码，HTML标签消肉的结果就是CSS样式表的编写成了页面制作的主体。Firebug的CSS查看器不仅仅自下向上列出每贰个CSS样式表的专项承袭关系，还列出了每三个样式在哪个样式文件中定义。你能够在这里个查看器中一向抬高、修改、删除一些CSS样式表属性，并在当前页面中一向看看修改后的结果。

Firebug是与Firefox集成的，所以大家首先要设置的事Firefox浏览器。安装好浏览器后，展开浏览器，接受菜单栏上的“工具”菜单，选取“附加软件”，在弹出窗口中式茶食击右下角的“获取增加”链接。在张开的页面的search输入框中输入“firebug”。等找出结果出来后点击Firbug链接（图1-1群青圈住部分）踏入Firebug的下载安装页面。

概述

　　FireBug是三个用以网址前端开辟的工具，它是FireFox浏览器的贰个扩充插件。它能够用于调试JavaScript、查看DOM、深入分析CSS、监察和控制互连网流量甚至开展Ajax交互等。它提供了差不离前端开拓要求的如日中天体功用。官方网站：www.getfirebug.com

怎样取得Firebug？

因为它是Firefox浏览器的三个增添插件，所以首先要求下载Firefox浏览器。读者能够访谈www.mozilla.com下载并设置Firefox浏览器。安装达成后用它访问

跻身下图所示页面。点击”加多到Firefox”，然后点击”即刻安装”，最后重复起动Firefox浏览器就能够成功安装。

　　在Firebug中，只要您改改过页面中的内容，就能够以色情高亮度呈现已经修改过的剧情，如下图：

查看和修改HTML
率先次看到Firebug强盛的HTML代码查看器，就以为它独特，比较于Firefox自带的HTML查看器，它的功效强盛了相当多。
HTML

Firebug的日志输出有两种可选的格式以致语法，甚至足以定制彩色输出，比起单调的alert，分明特别方便人民群众，限于篇幅，这里不做详细表明，不过有志于提升debug功能的读者，可以到Firebug的官方站点（见附录）查看更详尽的科目。

通过xpath表达式再次回到Element数组。

5、数次加载页面后Firebug会记得加载前的职位

图7-3

图1：Firebug插件展开图示

Firebug Website..

　　2、能够使用Firebug修改HTML和CSS

Console 控制台
调节台能够显示当前页面中的javascript错误以至警报，并提醒出错的公文和行号，方便调节和测验，这个错误提醒比起浏览器本人提供的乖谬提示尤其详实且具备参照他事他说加以考察价值。并且在调度Ajax应用的时候也是特意有用，你可以见到在调节台里观察每贰个XMLHttpRequests哀告post出去的参数、
U奥迪Q3L，http头以至回馈的剧情，原来就好像在暗自黑匣子里运维的程序被清楚地出示在您前边。

Options：Always Open in New
Window

　　在上海体育场面中，只要点每三个央求旁边的+号，就能够看来该哀告的具体细节，如下图：

图5：Firebug中的CSS标尺

图1-1

您或许感兴趣的稿子:

运用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使用详解六
神威无比的WEB开发好帮手FireBug(Firefox
Plugin)
js之WEB开采调节和测量检验利器:Firebug
下载
FireBug 调试JS入门教程
如何调整JS

图7-1

图7-2

图2：在决定台里调节和测验javascript

10、
命令行调节和测量检验

9、Firebug强盛的互联网数据监视功能

在安装好插件之后，先用Firefox浏览器展开供给测量检验的页面，然后点击右下方的铁灰开关或利用火速键F12唤出Firebug插件，它会将日前页面分成上下四个框架，如图1所示。

除却通过按下“Inspect”开关，单击展现区域选拔源代码，大家还能因此单击源代码中的HTML标识（开端或停止标识都得以）来挑选。大家品尝一下把鼠标移动到HTML标志，会意识鼠标指针形成了手的形态，那注脚大家可以因此单击选取该源代码。采用源代码后，我们就能够通过左侧的成效区查看、编辑和调护医治它的CSS定义和盒子模型（CSS盒子模型请参阅相关表明，这里就不再赘言了），还会有叁个很好的功力正是当外部编辑器修改了源代码（未有删除该源代码，只是修改），大家在浏览注重新加载页面后，选拔的源代码不会转移，大家能够很方便的观望源代码的变型与效用。

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

Javascript调试器

那是三个很科学的javascript脚本调试器，占用空间一点都不大，不过单步调节和测量试验、设置断点、变量查看窗口多个众多。正所谓麻雀虽小，麻雀虽小。

假定你有叁个网址已经济建产生，然则它的javascript有总体性上的难题要么不是太周密，能够通过面板上的Profile来总括每段脚本运维的年月，查看终归是哪些语句实践时间过长，一步步拔除难题。

图7：javascript调试器

唤醒：要是你正在学习CSS样式表的应用，可是总记不住常用的样式表有啥样值，能够尝试在CSS调节和测验器中当选二个体制表属性，然后用前后方向键来改造它的值，它会把或许的值一个个遍历给你看。

console.trace();

　　在Firebug调整台的的Javascript调控面板中，能够对页面中的Javascript实行调和，方法很简短，只需求在要调治的行的左边单击，就能够并发断点了，之后请牢记上面常件的连忙键：

即便您不想安装Firebug Lite，只是想制止脚本错误，那么能够在剧本中投入以下语句：

　　10、使用Firebug的Log功能

有的时候页面中的javascript会基于客户的动作如鼠标的onmouseover来动态改造一些HTML成分的样式表或背景观，HTML查看器会将页面上转移的剧情也抓下来，并以黑褐高亮标志，让网页的潜规则通透到底形成历史。

　　通过Firebug，可以直接修改HTML，扩张HTML的习性，删除成分，增添CSS样式及落到实处越来越多职能，如下图：

DOM查看器

DOM(Document Object
Model)里头包罗了大气的Object以致函数、事件，在以前，你要想从当中查到必要的内容，绝非易事，那好比你去了二个英豪的体育场面，想要找到几本名字不太相符的小书，众多的取舍会让您心中无数。而利用Firebug的DOM查看器却能便于地浏览DOM的内部结构，帮忙你快捷稳固DOM对象。双击叁个DOM对象，就可以看到编辑它的变量或值，编辑的同时，你或者会发掘它还恐怕有自动实现效用，当你输入document.get之后，按下tab键就能够补齐为
document.getElementById，非常实惠。倘诺您以为补齐得远远不够美貌，按下shift+tab又会恢复原状。用了Firebug的
DOM查看器，你的javascript从此找到了促使的对象，Web开拓大概就成了意气风发件乐事。

图8: Dom查看器

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

象C shell或Python
shell同样，你还是能够在调控桃园查阅变量内容，直接运营javascript语句，就到底大段的javascript程序也能够正确运转并得到运维期的消息。

　　Firefox搭配Firebug在web程序设计中，可谓是“双剑合壁”，功效强盛，本文只是选用了中间的震耳欲聋对技艺予以介绍，更加多的请参见Firebug官方网站的牵线。

互联网境况监视器

也可能有一天，你的首席实行官娘依旧顾客找到你，抱怨你制作的网页速度奇慢，你该怎么样回答？你或者会说那大概是网络难题，也许是电脑配置难题，可能是前后相继太慢，只怕直说是他们的人品难题？不管怎么说，最后你恐怕被需求去化解那几个有种种大概的难题。

网络情形监视器能帮您化解那些劳顿难点。Firebug的网络监视器同样是成效强盛的，它能将页面中的CSS、javascript以致网页中援用的图纸载入所费用的年华以矩状图表现出来，或然在这里边您能大器晚成把揪出拖慢了你的网页的主犯，进而对网页举行调优，末了业主满足客商心爱，你的营生也因而而加强。

互联网监视器还会有一点点别样细节成效，比方预览图片，查看每贰个外界文件以至是xmlHttpRequests诉求的http头等等。

图6：互连网处境监视器

列出目的的富有属性，和在DOM标签页查看该对象的是同等的。

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

Esc

　　在地方的第4点中，大家提到了在>>>这些命令行下能够举行Javascript的调度，而别的三个技艺是足以行使如$1去会见曾经访谈过的变量中的最后三个，如此类推，能够接收$2访谈曾经拜望过的变量中的尾数第二个。如下图：

按上涨的幅度31日增数值

Firebug是Firefox下的风流罗曼蒂克款开拓类插件，现属于Firefox的一等强力推荐插件之生机勃勃。它集HTML查看和编排、
Javascript调整台、网络意况监视器于大器晚成体，是支付JavaScript、CSS、HTML和Ajax的得力助手。Firebug就如风华正茂把精巧的Switzerland军刀，从各样不一样的角度剖判Web页面内部的底细层面，给Web开荒者带来异常的大的有利。那是意气风发款令人喜爱的插件，假使您早先从未接触过它，只怕在翻阅本文之后，会有意气风发试的欲望。作者在作文此文的时候，正逢Firebug发布1.0正式版，那必得说是种巧合。

移到上一个区域

　　11、能够在Firebug中调节和测量检验程序

小结

Firebug插件提供了一站式web开荒所不可或缺的工具。从HTML的编辑撰写，到CSS样式表的美化调优，以致用javascript脚本开荒，亦大概Ajax应用，Firebug插件都会成为你的得力帮手。所谓工欲善其事，磨刀不误砍柴工。在Web2.0的一代，言必称Ajax，动辄便是用户体验升高，假如把Firebug工具用好，必能让你如虎生翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开拓中的行家级人物。

　　能够看出，各种等级的日记输出，都含有二个多彩的Logo，能给客户很显著的升迁。同时，console.log
还协理格式化字符串的输出，你可以用临近C语言中printf的语法来调用这一个函数：console.log(“%s
is %d years old.”, “Bob”, 42)。

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

自行完毕下贰个属性

百顺百依广大从业Web开采职业的开垦者都闻讯和接收过Firebug，但或者大多数人还不驾驭，其实它是三个在网页设计方面效果卓越强大的编辑器，它能够对HTML、DOM、CSS、HTTP和Javascript进行宏观的跟踪和调护医治。它是Firefox浏览器的一个插件，所以建议各位Web开垦者

选择Inspect检查职能，大家还是能用鼠标在页面中央市直机关接选取一些区块，查占卜应的HTML源代码和CSS样式表，真正的姣好所见即所得，假如你选择了外界编辑器修改了当下网页，能够点击Firebug的reload图片重新载入网页，它会继续追踪你前边用Inspect选中的区块，方便调节和测验。

　　在Firebug中，你能够点调节台南的“profile(轮廓)”选项，这将翻开Firebug的个性监视作用，之后您能够拓宽页面包车型的士一文山会海操作，当再次点profile开关后，将甘休对品质的监测活动，接着Firebug会呈现三个列表，此中会分晓列明操作进度中所涉及的函数，调用次数，占用时间、平均时间，最时辰间，最大时间等，如下图所示：

全局操作

　　Firebug还提供了卓殊作用强盛的网络数据监功效。开拓者在支付web应用时，常常要着重种种HTTP乞求和回应，在这里方面Firebug的职能非常有力。首先，只必要张开调节面板中的网络成效，然后在每便运转页面时，都得以明白看出各个HTTP的倡议和HTTP回应的维妙维肖细节。如下图：

八个标准的运用正是页面中的一个区块地点呈现略微不太适宜，它需求活动多少个象素。那时候用CSS调节和测验工具得以轻巧编辑它的职位——你能够依靠供给自由活动象素。
如图4中正在修改二个区块的背景观。

在行号上Shift+Click

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

第如火如荼你看来的是早就由此格式化的HTML代码，它有旁客官清的层系，你能够方便地识别出每三个标签之间的依靠并行关系，标签的折叠功用能够帮助你集中精力深入分析代码。源代码上方还标志出了DOM的层系，如图3所示，它理解地列出了多个hml成分的parent、child甚至root成分，配合Firebug自带的CSS查看器使用，会给div+css页面深入分析编写带来十分的大的好处。你还是能够在HTML查看器中一贯改换HTML源代码，并在浏览器中第不经常间见到修改后的效果与利益，光凭这点就能够让洋洋页面设计员至死不变地形成Firebug的观者了。

剧本在断点停止后，我们就足以应用搜索框旁的4个跟踪按键实行代码追踪了（图7-7）。第如日中天开关是承接运维程序，不再实施跟踪，快捷键是F8。第一个开关是单步实施措施，每便推行一条语句，该办法在遇见函数调用时不步入调用函数内部进行追踪，快捷键是F10。第多少个开关也是单步执行措施，每趟试行一条语句，但它蒙受函数调用时会走入调用函数内部开展追踪，快捷键是F11。当您进来调用函数内，想马上跳出来时，能够单击第多个按键，该按键未有神速键。

应用
Firebug插件纵然功效强大，可是它已经和Firefox浏览器无缝地组合在协同，使用简易直观。假若你担忧它会据有太多的系统财富，也能够方便地启用/关闭那一个插件，以至针对特定的站点开启这几个插件。

将刀口切换来Scripts菜单

　　在设计页面时，平日要记录下页面包车型地铁某个信息，那个时候，可以利用Firebug中的log日志功用，把如日中天部分音讯输出到firebug的调控台南，那样就实惠调节和测量试验了。Firebug提供了三个console对象，在插件加载的时候就注册到Javascript的运维条件中去了，能够在程序中直接选取。console对象提供了叁个log方法，譬喻表达如下：

决定台还可能有个相当重要的功用便是查看脚本的log,
在那在此此前你大概习于旧贯了选择alert来打字与印刷变量，然而Firebug给大家带来了一个新相爱的人—— console.log, 最简便的打字与印刷日志的语法是这么的：

命令行的富有非常函数请看表3：

如果你有一群参数供给整合在联合具名输出，能够写成这么：

Page Down

　　总结

8、 查看DOM结构

6、使用$标识去便利访谈变量

万风度翩翩显示为革命的文件名，则表示该公文在服务器中不设有，无法下载，那样你就要检查一下文件的门径是还是不是准确可能是或不是上传了该公文（图9-2蓝绿圈住区域2）。

　　4、使用Firebug调试Javascript代码

图5-9

　　(1) F10 步向下黄金年代行；
(2) F8接二连三调节和测量试验；
(3) F11进来Javascript中的函数体调节和测量试验；
(4) Shift+F11跳出函数体。

　　能够观望，能看见HTTP的头顶的各类音讯。一样，假若要看脚下页面中的比方图片，FLASH等要素的音信等，也足以透过上航海用体育地方去点分裂的选项卡去筛选查看，十分有益。

测量检验贰个代表是还是不是为true，假设为false，提交三个不意气风发消息到调控台。

　　3、能够由此Firebug查看DOM成分和对XML进行操作

图9-1

图9-2

Shift+Tab

相信广大从事Web开垦工作的开拓者都闻讯和选取过Firebug，但只怕超越八分之四人还不清楚，其实它是二个在网页设计方面效果极其刚劲的编辑器，它能够对HTML、DOM、CSS、HTTP和Javascript进行完美的追踪和调节和测验。它是Firefox浏览器的一个插件，所以建议各位Web开拓者，要丰盛利用FireFox浏览器和Firebug插件进行平常的调解职业。本文选取了13个Web开拓者应该调节的Firebug的起码应用才能，介绍给我们。

4、 控制台（Console）

　　一样，也提供了更快速的不二秘技：只须要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中活动时，在Firebug调节桃园就立刻显得移动时通过的HTML成分的代码：

页面设计中，大家临时最头疼的是何许？是盒子模型！为了调节三个Element的margin、border、padding和相对地方，大家频频须求花相当多技能去修改源代码，然后刷新页面查看效果。有了Firebug，你就能够轻便答对了。我们将左侧的区域切换成“Layout”标签（图5-16），你会看出一个盒子模型，里面从外到里通过分化的线和颜色划分出了offset、margin、border、padding和内容五个区域，里面4个区域在种种边上都有1个数值，表示该方向上的调节值。大家先在左侧采取“div2”，然后把鼠标分别运动到“Layout”里的不等区域（图5-17），然后小心一下页面，页面在顶上部分多了一条水平标尺，在左臂多一条垂直标尺，而4条实线提示出了当前鼠标提示的区域实际地方，通过与标尺的交点能够通晓该区域离页面彰显区域左上角的偏移量（单位是px），当然大家也足以由此layout中的数字总结出这么些偏移量。在图中，大家仍然为能够见到，在剧情区域的外部还只怕有3个不等颜色的区域，它们从里到外用分歧颜色代表了padding、border、margin的职分和偏移量。只要将鼠标移动到分歧区域，页面中的4条实线也会转移地方，提醒出页面中相应的区域。大家还可以够透过修改Layout中的数值，对突显效果开展调解。举个例子大家要将“div2”的原委显示区域扩展到200×200，将鼠标移动最侧边的100上，光标形成“I”后，单击鼠标，然后在输入框中输入200，按回车可承继修改中度值，输入200，回车的后边落成修改。页面中的“div2”区域曾经扩充到200×200了，而源代码也加码了“style="width:
200px; height: 200px;"”（图5-18）。大家切换标签到“Style”，会开掘多了“element.style
{height:200px;width:200px;}”(图5-19)，而CSS定义里面包车型大巴中度和幅度都划了横线，表示不起作用了，“element.style”表示一直定义在Element源代码上的CSS属性。不常候有个别Element会有同样的性质，也许有友好非常的习性，而非凡的习性想写在Element的源代码上，就能够在Style里单击鼠标右键接受“Edit Element
Style..”实行增加。假如有意思味的话，大家能够品尝修改“Layout”里的另外属性值，看看页面的浮动，这里本人就不再后生可畏一表达了。

　　在上海教室的美食做法中得以精晓看出，你可以对HTML成分进行三种种种的改变操作，方法是先点击HTML部分的代码，然后鼠标右键就可以在弹出的菜谱中展开操作。

　　在Firebug调节新竹，借使要施行调节和测量试验Javascript代码，只必要首先将Script调节面版运行，然后在点击Console按键，在下拉菜单中采取呈现Javascipt及HTML错误(还足以让客商选拔显示越来越多的错误)，接着在底部会意识出现>>>的箭头，在这里地，你能够输入Javascipt代码，输入后，立即按回车键，就可以施行了，拾壹分有益于，如下图：

Larger Command Line

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

　　8、监视Javascript的周转质量

机关完毕下多少个关键字

　　在Firefox中实践如下代码，会看出Firebug的调控新竹冒出如下音信：

Ctrl+.

在行号上Middle-Click

▲（点击查阅大图）

此前对剧本举办品质测量检验，可选参数title将用作测量检验结果的标题。

图5-7

图5-8

Esc

13、
总结

列出HTML或XML Element的XML源树。

Ctrl+,

Ctrl+.

图5-6

Ctrl+Shift+E

单击“Clear”按键可清除调节台的支配音信。

上面大家来尝试一下断点的效果。首先在测量试验页脚本里增添三个test的函数，函数的显要操作是运作一个一千次的循环，将循环的参数值展现在“div2”里：

图1-3

算算代码的推行次数。titile作为出口题目。

万旭日东升您把“Inspect”按键按下，效能正好相反，在页面中移动鼠标，则当前来得区域的源代码会被加亮突显出来。在图5-5中，大家能够观看鼠标指针正指向“方块二”，而在源代码中得以看出，“方块二”的源代码“<div id="div2">``方块二</div>”已被加亮显示（鲜紫部分）。如若您单击有些展现区域，则该区域的源代码会被入选。

单击行号

蹲点贰个指标。tabName表示在特别标签页对该对象举行监视，可选值为“html”、“css”、“script”和“dom”。

console.dirxml(node)

刷新页面后看看结果（图11-3）。console.log能够接连败出七个指标，並且只要目的是DOM、函数，还能直接点击去到该对象。

表1

F11

图10-1

Allowed Sites

我们来寻访测量试验一下那么些函数的输出，在剧本中进入：

将作用区第二行的竹签切换来“Script”，在此我们得以对页面中享有的剧本进行调整，满含链接的台本。和CSS同样，能够经过文件选取按键选取分化的脚本文件。

从图中大家能够看看，页面中每一个下载文件都用贰个肉桂色条表示它相对别的文件是从曾几何时伊始下载的，下载时间是有个别。在底层我们见到页面发送了多少个央求，下载总的数量是多少，有微微是有缓存的，下载总共开支了不怎么时间等音讯。

打消编辑

在“Console”标签了有二个命令行工具，大家能够在此边运维一些本子对页面进行调治。

移到路径中下多少个对象

Shift+Tab

打开Firebug主页。

移到下一个区域

双击在空白

突发性，大家必要写四个for循环列出多少个对象的保有属性或然某些HTML
Element下的保有节点，有了firebug后，我们不需求再写那些for循环了，大家只须要运用console.dir(object)或console.dirxml(element)就能够了。

3、 Firebug主菜单

撤消编辑

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

Disable Firebug for xxxxx

显示XMLHttpRequests。

显示CSS错误。

开启Firebug窗口（图2-2）后，大家能够见见窗口首要有多个区域，一个是功用区，三个是消息区。接收功效区第二行的不及标签，信息区的来得会有例外，Options的选项也会差异，搜索框的寻觅方式也会不相同。

Shift+Tab

Script标签

按上升的幅度10减小数值

在函数的首先行扩大二个断点。

6、 查看CSS定义

假诺想在剧本某些地方设置断点，能够在本子中输入“debugger”作为大器晚成行。当脚本施行到那后生可畏行时会截止施行等待客商操作，那时候能够经过切换来“Script”标签对剧本实行调护医疗。

移到上叁个区域

Disable Firebug

Ctrl+Shift+K

图7-4

图7-5

编制文本节点

5、 页面源代码查看作用

HTML标签

正是意外，Firebug居然有那么多好效果照旧是自己不亮堂。通过写本篇小说，才认真的问询和读书了二次Firebug，越学越认为到它的威力。可是本人学的也只是浮光掠影，还也是有越多的效果和技艺须求在平日的应用中慢慢储存，因而这篇小说只是贰个简练的牵线，还只怕有非常多东西是从未提到到的，而且因为本人自身水平与力量轻松，所以文中会有那三个漏洞百出与脱漏，希望我们能多多原谅与指正！多谢！

大家能够实行有个别文件，查看它的HTTP头新闻和重临结果的音信。如若伏乞的是三个动态页面或XMLHttpRequest，则还足以查看提交的变量。通过查看提交的变量和重回信息，我们可以很方便的调节和测量试验程序是或不是科学提交了急需的变量和重返了不错的数目。举例从图36中，大家得以看出向“topics-remote.php”发送了三个央求，提交的参数有“_dc”、“callback”、“limit”和“start”多少个，值分别为“1188637445000”、“stcCallback1001”、“25”与“0”，从这里我们得以很有益的精通大家脚本操作提交的参数是或不是正确。切换来“Response”页能够看来重返的结果（图9-3），在这里边你能够对回到结果进行检查。假若您感觉在那地查看结果很乱，你可以单击鼠标右键，在弹出菜单中选用“Copy
Response body”复制结果到编辑器查看，你还能选择“Open
in New Tab”张开叁个新标签浏览。

F10

表4

图5-14

伺机安装到位后会单击窗口（图1-4）中的“重启 Firefox”开关重新起动Firefox。

关门/开启Firebug对xxxxx网址的编辑撰写、调节和测量检验和检查实验效率

Tab

7、 脚本调节和测验

转载本站文章请注明出处：vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=3262

在页面中点击Install Now（图1-2）按钮，Firebug是Firefox下的一款开发类插件

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

资源

HTML面板

CSS、DOM和网络面板

调整台面板

主面板

脚本面板

总结

概述

您或许感兴趣的稿子:

Javascript调试器

DOM查看器

互联网境况监视器

小结

相关文章