Firebug是Firefox下的一款开发类插件,马上就会在
分类:巴黎人-前端

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

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

原版的书文出处: 惟吾德馨(@Allen_Bryant)   

  在Firebug中,还足以设置带条件决断的断点,如下图:

图片 1

大家在命令行中输入“document.getElementById('div2').innerHTML”看看效果(图10-1),别忘了用TAB键完毕飞速输加入关贸总协定组织键字。在消息区显示了日前“div2”的显得内容。

资源

赶快键:按<F12>能够便捷开启Firebug,假若想获取完整的快捷键列表,能够访谈.

主题素材:如果设置进度中境遇了不方便,能够查看Firebug的Q&A,网址为.

Firebug插件:Firebug除了本身庞大的功能之外,还会有基于Firebug的插件,它们用于扩展Firebug的作用。比如谷歌公司支付Page Speed插件,开拓人士可以选用它来评估他们网页的脾气,并取得有关怎么着创新品质的建议。Yahoo公司耗费的用来检查评定页面全体质量的YSlow和用来调节和测验PHP的FirePHP。还恐怕有用于调节和测验Cookie的Firecookie等。

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

DOM查看器

DOM(Document Object Model)里头包括了多量的Object以及函数、事件,在从前,你要想从中查到须要的内容,绝非易事,那好比你去了叁个传奇人物的体育场地,想要找到几本名字不太方便的小书,众多的精选会让您魂不守舍。而选用Firebug的DOM查看器却能方便人民群众地浏览DOM的内部结构,扶助你快速稳固DOM对象。双击一个DOM对象,就可以编辑它的变量或值,编辑的同不经常候,你可能会发现它还应该有自动完结作用,当你输入document.get之后,按下tab键就会补齐为 document.getElementById,极度有益。假使您感觉补齐得相当不够美丽,按下shift+tab又会恢复生机原状。用了Firebug的 DOM查看器,你的javascript从此找到了促使的目的,Web开拓可能就成了一件乐事。

图8: Dom查看器
图片 2

竣事品质测验。

CSS、DOM和网络面板

那3个面板相对于前方2个面板相比次要,CSS和DOM面板与HTML面板中侧边的面板功用相似,但比不上HTML面板灵活,由此一般选用得比相当少。

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

图片 3

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

而在网络面板中,绝对有点强硬的职能,举个例子展开有些网址首页,Firebug突显效果如下图所示:

图片 4

该页面能够监视每一样成分的加载情形,包含剧本,图片等的轻重缓急以及加载用时等,对于页面优化有着非常主要的意思。

其他,最上部还足以分类查看成分的HTML、CSS、JS等的加载意况,使解析越来越灵活。

 

这段时间的网页设计言必称div+css,如若你是用table套出来的HTML页面,就得按那规矩重构三遍,否则显得你非常不足前卫!用div做出来的页面包车型大巴确能精简HTML代码,HTML标签消脂的结果正是CSS样式表的编写成了页面制作的重心。Firebug的CSS查看器不止自下向上列出每一种CSS样式表的隶属承继关系,还列出了每叁个体裁在哪些样式文件中定义。你能够在那么些查看器中一向抬高、修改、删除一些CSS样式表属性,并在现阶段页面中央直属机关接观望修改后的结果。

Tab

概述

  FireBug是多个用以网址前端开拓的工具,它是FireFox浏览器的贰个扩充插件。它能够用来调试JavaScript、查看DOM、分析CSS、监察和控制互连网流量以及进行Ajax交互等。它提供了大约前端开拓须求的百分百功力。官方网站:www.getfirebug.com

什么样获得Firebug?

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

跻身下图所示页面。点击”增加到Firefox”,然后点击”立刻安装”,最后再度启航Firefox浏览器就能够成功安装。

图片 5

图片 6

图5:Firebug中的CSS标尺

Ctrl+Shift+N

主面板

安装达成现在,在Firefox浏览器的地点后方就能够有一个小虫子的Logo图片 7。单击该Logo后就可以开展Firebug的调整台,也能够通过神速键<F12>来开垦控制台。使用Ctrl+F12连忙键可以使Firebug独立张开二个窗口而不占用Firefox页面尾部的上空。

图片 8

从上海体育地方中得以见见,Firebug包涵7个面板:

支配台面板:用于记录日志、大概浏览、错误提示和推行命令行,同期也用于Ajax的调节和测量试验;

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

CSS面板:用于查看全体页面上的CSS文件,能够动态地修改CSS样式,由于HTML面板中曾经包括了一个CSS面板,由此该面板将非常少用到;

剧本面板:用于突显Javascript文件及其所在的页面,也得以用来展现Javascript的Debug调节和测量检验,包涵3个子面板,分别是监督、饭店和断点;

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

互连网面板:用于监视互联网移动,能够襄协助调查看三个页面包车型大巴载入景况,包含文件下载所攻下的光阴和文书下载出错等音讯,也能够用来监视Ajax行为;

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


 

  Firebug还提供了特别成效庞大的互联网数据监功用。开辟者在支付web应用时,常常要阅览各个HTTP央求和回复,在那上头Firebug的法力特别强劲。首先,只须要开启调控面板中的互联网功效,然后在历次运维页面时,都得以通晓看到各种HTTP的央浼和HTTP回应的实际细节。如下图:

图1:Firebug插件张开图示

 

  调控台面板

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。

图片 9

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>

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

图片 10

Firebug调控台还提供了任何功效,举个例子检验函数推行时间、音信分组、测验驱动、追踪、计数以及查看Javascript轮廓等。越多质感能够访问.

4.面板内的子菜单

控制台面板内有一排子菜单,分别是驱除、保持、概略、全体等。

图片 11

“清除”用于破除调整桃园的内容。“保持”则是把控制台北的内容保留,固然刷新了仍然还留存。“全体”则是呈现任何的音讯。后边的“错误”、“警告”、“新闻”、“调节和测量试验音讯”、“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<1000;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>

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>

开拓页面,呈现四个按键:

图片 12

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

图片 13

从上海体育地方中得以见到,出现了一行字,“概略搜聚焦。再一次点击“轮廓”查看结果。”,接着,依次单击“实践循环1”、“推行循环2”、“实行循环3”四个按键各三回,仁同一视复单击“概略菜单”,就能够看到如下图所示结果:

图片 14

能够看来Firebug彰显出了老大详细的报告。包含各样函数的函数名、调用次数、占用时间的比例、占用时间、时间、平均时间、最时辰间、最大日子以及各市的文本的行数等新闻。

5.Ajax调试

调整台面板也可用以Ajax调节和测量试验,在一定水平上得以替代互联网面板。举例笔者张开二个页面,能够在Firebug调节台看到此次Ajax的Http央浼头音讯和服务器响应头新闻。如下图,它会议及展览示出此次使用的Ajax的GET方法、地址、耗费时间以及调用Ajax要求的代码行数。最要紧的是有5个标签,即参数、头新闻、响应、HTML、Cookies.第二个标签用于查看传递给服务器的参数;第贰个标签用于查看响应头音信和请求头新闻;第七个标签用于查看服务器再次回到的情节;第三个标签则是查看服务器再次来到的HTML结构;第七个标签用于查占星应的Cookies。

图片 15

要是看不到任何音信的出现,只怕是将此功能关闭了,能够单击“调控台”旁边的下拉箭头,将“彰显XMLHttpRequests”前面包车型客车勾勾选上就可以。

图片 16

图片 17

运用Inspect检查职能,大家还足以用鼠标在页面中央机关单位接采取部分区块,查占卜应的HTML源代码和CSS样式表,真正的达成所见即所得,倘让你选拔了表面编辑器修改了当下网页,能够点击Firebug的reload图片重新载入网页,它会一连跟踪你在此以前用Inspect选中的区块,方便调节和测量试验。

盯住函数fn的调用。

  脚本面板

剧本面板不只可以够查看页面内的本子,况且还也可能有庞大的调节和测量检验成效。

在本子面板的左侧有“监察和控制”、“仓库”和“断点”四个面板,利用Firebug提供的装置断掉的成效,能够很便利地调节和测验程序,如下图所示:

图片 18

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行那句代码后边单击一下,那它前面就能够并发贰个棕黄的圆点,表示此处已经被安装了断点。此时,在右臂断点面板的断点列表中就涌出了刚刚设置的断点。假设想有的时候禁用有些断点,可以在断点列表中去掉有个别断点的日前的复选框中的勾,那么此时左臂面板中相应的断点就从红酸性绿产生了红浅桔黄色了。

图片 19

设置完断点之后,大家就可以调试程序了。单击页面中的“Click Here”开关,能够看到剧本结束在用谈暗绛红底色标出的那一行上。此时用鼠标移动到有个别变量上就能够彰显此时以此变量的value。呈现效果如下:

图片 20

这时候JavaScript内容上方的图片 21几个按钮已经变得可用了。它们各自表示“继续实施”、“单步进入”、“单步跳过”和“单步退出”。

继续实施<F8>:当通过断点来终止推行脚本时,单击<F8>就能恢复施行脚本。

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

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

单步退出<shift+F11>:允许复苏脚本的实施,直到下一个断点停止。

单击“单步步向”按键,代码会跳到下一行,显示效果如下:

图片 22

图片 23

从上海体育地方可以看看,当鼠标移动到“lab”变量上时,就足以来得出它的剧情是一个DOM成分,即“div#messageLabel”。

此时将右边手面板切换来“监察和控制”面板,这里列出了多少个变量,包蕴“this”指针的针对以及“lab”变量。单击“+”能够观望详细的音信。展现如下:

图片 24

2.标准化断点

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

图片 25

末尾单击页面包车型客车“Click Here”按键。能够开掘,脚本在“arr==5”这么些表明式为真时停下了,因而“5”以及后来的数字未有显示到页面中。下图分别是符合规律机能和安装了规范断点之后的展现效果相比:

图片 26图片 27

图片 28<script language="javascript" type="text/javascript"> 
图片 29 console.log('This is log message');  
图片 30 console.debug('This is debug message');  
图片 31  console.error('This is error message');  
图片 32  console.info('This is info message'); 
图片 33 console.warn('This is warning message');  
图片 34</script>

从图第11中学看到,Firebug有6个首要的Tab开关,下文将入眼介绍介绍这几方面包车型大巴功能。
Console HTML CSS Script Dom Net
决定台 Html查看器 Css查看器 脚本条时代 Dom查看器 互连网情状监视

Layout标签

总结

经过本文的学习,读者能够明白Firebug的基本成效。Firebug已经稳步改为一个调护医疗平台,而不仅仅是贰个简短的Firefox扩张插件。学好Firebug能给未来的就学和办事提供一定的增派。

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

1 赞 3 收藏 1 评论

图片 35

图片 36

应用
Firebug插件就算效能庞大,不过它曾经和Firefox浏览器无缝地构成在一道,使用简单直观。假使您顾虑它会攻下太多的系统能源,也得以实惠地启用/关闭那些插件,以致针对一定的站点开启这几个插件。

取消Inspect

HTML面板

1.翻看和更换HTML代码

Html面板的强有力之处就是能查看和改造HTML代码,並且那一个代码都是透过格式化的。下边以自个儿的贰个浏览器主页来做助教。

图片 37

在页面影棕色部分代表成分本身,天青表示padding部分,橄榄绿表示margin部分。同有的时候候可以实时地抬高、修改和删除HTML节点以及质量,如下图所示。别的,单击script节点还是可以一直查看脚本,此处的台本无论是内嵌在HTML中依旧外界导入的,都足以查阅到。同样那也适用于<style>标签内嵌也许导入的CSS样式和动态创建HTML代码。

图片 38

在HTML调整台的侧面能够见到任何页面当前的文书档案结构,可以通过单击“+”来进展。当单击相应的要素时,左边边板中就能够来得出脚下因素的体制、布局以及DOM信息。而当光标移动到HTML树中相应成分上时,上边页面中相应的要素将会被高亮展现。

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

图片 39

在HTML调节台的左侧能够看到全体页面当前的文书档案结构,能够通过单击“+”来张开。当单击相应的成分时,右左边板中就能够来得出近来因素的样式、布局以及DOM消息。而当光标移动到HTML树中相应成分上时,上边页面中相应的因素将会被高亮显示。

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

2.查看(Inspect)

应用查看(Inspect)效能,能够长足地搜寻到有个别成分的HTML结构,如图:

图片 40

当单击”Inspect”按键后,用鼠标在网页上当选三个成分时,成分会被叁个深青莲的规模住,同期下边包车型地铁HTML面板中相应的HTML树也会实行并且高亮显示。再度单击后就可以退出该形式,并且尾巴部分的HTML树也保证在那些处境。通过这几个成效,能够便捷寻觅页面内的成分,调节和测量试验和搜索相应代码极度便于。刷新网页后,页面显示的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”按键可以用于直接编辑选中的HTML代码,而背后显示的是现阶段成分在总体DOM中的结构路线。

3.查看DOM中被剧本更换的一部分

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

图片 41

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

图片 42

经过上海教室能够见见,HTML查看器会将页面上转移的源委页记录下来,并以墨紫高亮代表。有了这几个功效,网页的不成文规定将干净成为历史。大家得以应用该意义查看其余网址的动画效果是如何促成的。

4.翻看和修改成分的样式

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

图片 43

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

图片 44

5.查看DOM的信息

单击“DOM”面板后能够看出此因素的详实的DOM新闻以及函数和事件,如下图所示:图片 45

  能够见到,能来看HTTP的尾部的种种信息。一样,如若要看日前页面中的譬喻图片,FLASH等成分的新闻等,也能够透过上海教室去点不一致的选项卡去筛选查看,十一分方便。

网络处境监视器

莫不有一天,你的高管娘如故顾客找到您,抱怨你制作的网页速度奇慢,你该怎么回答?你恐怕会说那说不定是互连网难题,恐怕是计算机配置难点,只怕是程序太慢,可能直说是她们的人品难题?不管怎么说,最后你可能被供给去化解那几个有多样或然的主题材料。

互联网情状监视器能帮您消除那些困难难点。Firebug的互联网监视器同样是效率庞大的,它能将页面中的CSS、javascript以及网页中援引的图片载入所消耗的年月以矩状图表现出来,或者在那边你能一把揪出拖慢了您的网页的罪魁,进而对网页进行调优,最后总老董满足顾客心爱,你的饭碗也因而而不衰。

网络监视器还会有一点点别的细节成效,比方预览图片,查看每二个外界文件乃至是xmlHttpRequests诉求的http头等等。

图6:网络意况监视器
图片 46

当你通过“Inspect”锁定了一部分HTML Element时,你可以透过“$1”来做客倒数Element,依次类推,大家得以因此“$n”(n>1)访问依次倒序访谈锁定的Element。

   在Firefox中实行如下代码,会看到Firebug的调节台北出现如下音讯:

Console 控制台
调整台能够显示当前页面中的javascript错误以及警告,并提醒出错的文件和行号,方便调节和测量试验,这几个不当提醒比起浏览器自身提供的错误提醒越发详细且具有参考价值。并且在调试Ajax应用的时候也是特地有用,你能够在调节台里观察每三个XMLHttpRequests诉求post出去的参数、 UENVISIONL,http头以及回馈的剧情,原来就好像在泰然自若黑匣子里运转的主次被清楚地出示在您前边。

 

图片 47
▲(点击图片查看大图)

有时页面中的javascript会基于客户的动作如鼠标的onmouseover来动态改动一些HTML成分的样式表或背景象,HTML查看器会将页面上转移的剧情也抓下来,并以浅灰褐高亮标识,让网页的潜规则深透变成历史。

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

图1-1

  在上头的第4点中,大家提到了在>>>那些命令行下能够张开Javascript的调理,而除此以外一个技术是足以采纳如$1去访谈曾经拜会过的变量中的最后三个,如此类推,能够行使$2访问曾经看望过的变量中的尾数第贰个。如下图:

Javascript调试器

那是三个很正确的javascript脚本调节和测量试验器,占用空间比相当小,不过单步调节和测量检验、设置断点、变量查看窗口二个浩大。正所谓麻雀虽小,五脏俱全。

譬喻您有二个网址已经济建设成,可是它的javascript有质量上的标题照旧不是太完善,能够经过面板上的Profile来总括每段脚本运转的小时,查看毕竟是哪些语句实践时间过长,一步步去掉难题。

图7:javascript调试器
图片 48

 

图片 49

翻开和改造HTML
率先次拜会Firebug庞大的HTML代码查看器,就感到它优异,比较于Firefox自带的HTML查看器,它的功效庞大了广大。 HTML

 

  (1)  F10 步向下一行;
(2)  F8承继调试;
(3)  F11跻身Javascript中的函数体调节和测量检验;
(4)  Shift+F11跳出函数体。

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

将鼠标在文书中活动,假设是图形,我们可以见到图片的缩略图(图9-第22中学蓝圈住区域3)。

  8、监视Javascript的周转质量

console.log(”hello world”)

 

 

您也许感兴趣的篇章:

  • 选拔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

Shift+Tab

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

图片 50

cd(window)

图片 51

象C shell或Python shell同样,你还是能在调节桃园查阅变量内容,直接运转javascript语句,固然是大段的javascript程序也能够正确运转并获得运维期的新闻。

 

  10、使用Firebug的Log功能

图片 52

移步主题到Style Sheets菜单

  Firefox搭配Firebug在web程序设计中,可谓是“双剑合壁”,功用庞大,本文只是选项了内部的一些手艺予以介绍,越多的请参见Firebug官方网站的介绍。

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

图5-11

  通过Firebug,能够间接改变HTML,增加HTML的习性,删除成分,扩充CSS样式及达成越来越多职能,如下图:

升迁:就算您正在攻读CSS样式表的选拔,可是总记不住常用的样式表有哪些值,能够品味在CSS调节和测量检验器中选中三个样式表属性,然后用前后方向键来改造它的值,它会把可能的值一个个遍历给您看。

Shift+Tab

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

Firebug的日记输出有多种可选的格式以及语法,以至能够定制彩色输出,比起单调的alert,显明尤其惠及,限于篇幅,这里不做详细说明,不过有志于进步debug效能的读者,能够到Firebug的官方站点(见附录)查看更详尽的科目。

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

  4、使用Firebug调试Javascript代码

贰个突出的施用便是页面中的贰个区块地点显得有一点点不太对劲,它须要活动几个象素。那时候用CSS调节和测验工具得以大肆编辑它的职责——你能够依照须要自由活动象素。
如图4中正在修改三个区块的背景象。

 

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

操纵台还会有个相当重要的效应正是翻开脚本的log, 以前你恐怕习于旧贯了动用alert来打字与印刷变量,不过Firebug给大家带来了二个新相爱的人—— console.log, 最轻便易行的打字与印刷日志的语法是那般的:

活动完结下二日质量

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

图4: CSS查看器,可以一贯改变样式表

 

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

小结

Firebug插件提供了一条龙web开辟所必得的工具。从HTML的编写制定,到CSS样式表的美化调优,以及用javascript脚本开荒,亦可能Ajax应用,Firebug插件都会化为你的得力帮手。所谓工欲善其事,必先利其器。在Web2.0的临时,言必称Ajax,动辄就是客户体验升高,若是把Firebug工具用好,必能让你如虎生翼,将HTML、CSS、javascript整理得服服帖帖,从此成为web开采中的专家级人物。

Show JavaScript Errors

图片 53

可视化的CSS尺标
咱俩得以选择Firebug来查阅页面中某一区块的CSS样式表,若是进一步开展侧面Layout tab的话,它会以标尺的款式将这几天区块占用的面积清楚地方统一标准识出来,准确到象素,更令人感叹的是,你能够在那几个可视化的分界面中平素改动各象素的值,页面上区块的岗位就能随改变而改造。在页面中有个别因素现身错位也许面积大于预料值时,该功用能够提供可行的鼎力相助,你能够籍此剖析offset、margin、 padding、size之间的关系,进而寻觅消除难点的秘技。

单击成效区第二栏的“HTML”标签可切换成源代码查看功效(图5-1)。即使Firefox也提供了翻看页面源代码的机能,但它突显的只是页面文件本人的源代码,通过脚本输出的HTML源码是看不到。而Firebug则是所见即所得,是终极的源代码。

  在上海教室的菜单中得以知道看到,你能够对HTML成分进行四种三种的修改操作,方法是先点击HTML部分的代码,然后鼠标右键就可以在弹出的菜单中开展操作。

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

移到上二个区域

  在上图中,只要点每一个呼吁旁边的+号,就足以见到该央求的切实细节,如下图:

图片 54

活动完结上壹特质量

图片 55
▲(点击查看大图)

在装置好插件之后,先用Firefox浏览器张开需求测验的页面,然后点击右下方的玛瑙红按键或应用快捷键F12唤出Firebug插件,它会将如今页面分成上下八个框架,如图1所示。

Javascript的调整,是开垦Web应用尤其是AJAX应用很关键的一环,近年来对Javascript进行调和的工具相当多,笔者相比喜欢使用的是Firebug。Firebug是Joe Hewitt开荒的一套与Firefox集成在一块的功用强大的web开荒工具,能够实时编辑、调节和测量检验和监测任何页面包车型地铁CSS、HTML和JavaScript。

图片 56

图片 57

 

 

图3::HTML查看器

profileEnd()

图片 58

什么是Firebug
致力了数年的Web开辟专门的学业,更加的感觉以后对WEB开荒有了更加高的渴求。要写出非凡的HTML代码;要编写精致的CSS样式表展示各类页面模块;要调度javascript给页面扩展一些更活跃的成分;要选用Ajax给顾客带来越来越好的心得。二个安然依旧的WEB开垦人士供给关照越来越多层面,技术交出一份一样杰出的作业。为救助周围正处在Web2.0洪流中的开垦职员,在那边为大家介绍一款轻便灵活的帮忙开采工具。

说明

图片 59

假如你有一批参数必要组合在一同输出,能够写成那样:

 

  不精晓诸位有无境遇过这么的情景,在三个叶影参差的HTML页面中,当您想找某些页面成分的其实对应的HTML时,你不得不在一大堆HTML代码中去搜寻,拾壹分烦劳。有了Firebug,现在你只须要在页面中,用鼠标右键选中有些成分,然后在弹出的菜单中,选取“查看成分”,立时就能够在HTML页面代码中找到该因素对应的代码了,十三分方便,如下图所示:

率先你看来的是一度经过格式化的HTML代码,它有观察众清的层系,你可见方便地识别出每二个标签之间的凭借并行关系,标签的折叠作用能够援助你聚焦精力剖判代码。源代码上方还标识出了DOM的层系,如图3所示,它知道地列出了三个hml成分的parent、child以及root成分,协作Firebug自带的CSS查看器使用,会给div+css页面分析编写带来异常的大的功利。你还足以在HTML查看器中一向改变HTML源代码,并在浏览器中第有时间看到修改后的效果,光凭那点就能让无数页面设计员至死不渝地改成Firebug的听众了。

列出指标的享有属性。

 

Firebug是Firefox下的一款开荒类插件,现属于Firefox的头号强力推荐插件之一。它集HTML查看和编排、 Javascript调控台、网络意况监视器于一体,是付出JavaScript、CSS、HTML和Ajax的得力助手。Firebug仿佛一把精巧的瑞士联邦军刀,从各类差别的角度深入分析Web页面内部的内部情状层面,给Web开荒者带来非常的大的惠及。那是一款令人欢欣的插件,如果您之前尚未接触过它,可能在翻阅本文之后,会有一试的私欲。作者在作文此文的时候,正逢Firebug发布1.0正式版,那无法不说是种巧合。

单步执行(Step Into)

  7、Firebug会高亮度展现修改过的从头到尾的经过

临时,为了更了然方便的查看输出消息,大家恐怕须要将一部分调节和测量检验音讯实行分组输出,那么能够选取console.group来对消息实行分组,在组消息输出实现后用console.groupEnd截止分组。大家测验一下把刚刚的4个出口作为三个分组输出,修改代码为:

 

打开Firebug主页。

  当张开二个HTML页通过Firebug查看HTML代码时,你能够同有的时候间点在调整面板中的DOM树,就能够以DOM的树型结构格局看看全部HTML的布局。而借使您是开荒了三个XML文件,那么鼠标右键点XML文件中的任何贰个成分,在弹出的美食指南中一律能够挑选对XML进行相关操作,如下图:

  

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

打开Firebug文档页。

  总结

console.log('Hello');

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

 

  在安插页面时,平常要记录下页面包车型地铁片段新闻,那一年,能够行使Firebug中的log日志效能,把一部分音讯输出到firebug的调控高雄,那样就有助于调节和测验了。Firebug提供了一个console对象,在插件加载的时候就注册到Javascript的运维条件中去了,能够在程序中央直属机关接使用。console对象提供了贰个log方法,例如表明如下:

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

 

            console.trace();

 相信广大转业Web开辟职业的开采者都闻讯和接纳过Firebug,但只怕大部分人还不驾驭,其实它是三个在网页设计方面效果特别强大的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript实行宏观的追踪和调度。它是Firefox浏览器的两个插件,所以建议各位Web开拓者,要足够利用FireFox浏览器和Firebug插件进行普通的调整职业。本文选拔了10个Web开辟者应该精通的Firebug的初级应用本事,介绍给大家。

安装断点

   

单击Firebug的Logo恐怕按F12键你会发觉页面窗口被分为了两片段,上半部分是浏览的页面,下半部分则是Firebug的支配窗口(图2-1)。假设您不希罕那样,能够按CTCRUISERL+F12或在前面操作后单击右上角的上箭头开关,弹出八个新窗口作为Firebug的操纵窗口。

  在Firebug调节台北,借使要推行调节和测验Javascript代码,只需求首先将Script调整面版运营,然后在点击Console开关,在下拉菜单中甄选彰显Javascipt及HTML错误(还足以让顾客选用呈现越多的一无所长),接着在尾部会开采出现>>>的箭头,在那边,你能够输入Javascipt代码,输入后,登时按回车键,就足以施行了,十三分有助于,如下图:

双击在空白

深信广大从事Web开采工作的开垦者都闻讯和应用过Firebug,但或然大多数人还不知情,其实它是叁个在网页设计方面机能万分强劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript举办完善的追踪和调节和测验。它是Firefox浏览器的三个插件,所以建议各位Web开垦者

假定不想行使该效用,可以选取Options菜单的“Disable Network Monitoring”关闭该功用。

图片 60

 

  三个小技艺是,在输入Javascipt的时候,还帮助采用tab键的机动落成提醒作用,譬喻对于两个相当长的Javascipt函数,在没输入完的时候要是按tab键firebug就能够帮忙您活动补充完整。

  

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

单击文本

  可以看看,各样等级的日志输出,都包含八个秀丽多姿的Logo,能给顾客很刚毅的晋升。同期,console.log 还支持格式化字符串的出口,你能够用临近C语言中printf的语法来调用那些函数:console.log(“%s is %d years old.”, “Bob”, 42)。

截至分组输出。

  在Firebug中,你能够点调整台中的“profile(轮廓)”选项,那将拉开Firebug的习性监视作用,之后你能够展开页面包车型地铁一名目多数操作,当再次点profile开关后,将告一段落对品质的监测活动,接着Firebug会展现三个列表,其中会精晓列明操作进度中所涉及的函数,调用次数,占用时间、平均时间,最小时间,最大日子等,如下图所示:

Ctrl+Down

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

始建多个名称叫name的放大计时器,总计代码的实行时间,调用console.timeEnd(name)截止沙漏并出口试行时间。

图片 61

 

  无论你重新加载多少次页面,Firebug在每便加载页面后总会自个儿记得加载前页面所在的职分(例如你已经在浏览页面包车型大巴尾部,此时再加载页面,则新的页面加载后,依旧把你带到页面尾巴部分)。

撤除编辑

  在Firebug调控台的的Javascript调整面板中,能够对页面中的Javascript实行调节和测量检验,方法极粗略,只须求在要调度的行的左边单击,就能油不过生断点了,之后请牢记下边常件的快捷键:

Esc

  同样,也提供了更敏捷的不二等秘书技:只必要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug调节桃园就霎时显得移动时通过的HTML成分的代码:

 

移到路线里的上二个节点

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

图7-8

是或不是很方便?方就是造福,不过本人的源代码比相当多,並且有个别区域在页面中不低价鼠标钦点,怎么做?无妨,大家还会有五个厉害火器,找出效果。譬喻我们领会某些HTML Element的ID是“div2”,但在浓厚的源代码中不好找,在页面中鼠标也很难找到,那大家就在作用区的物色框中输入“div2”,再看看源代码区域,“div2”被加亮展现出来了(图5-6海洋蓝部分)。在这一个轻巧的例证恐怕看不出很好的法力,大家能够尝尝一下把“div1”先折叠起来,然后在搜求框输入“div3”,你可以看看“div1”会自行举行,并将“div3”加亮展现,尽管还以为相当不够美丽,能够找三个源代码非常多的例子测量试验一下。

移到上一个区域

DOM 标签

 

是不是想精晓代码的周转速度?很简短,使用console.time和console.timeEnd就能够。

编写文本节点

在行号上Right-Click

 

  

HTML Inspect 模式

Ctrl+Shift+;

  

 

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

在函数的率先行增添叁个断点。

将光标移到命令行

向调控台出口一个带错误Logo和背景颜色的音讯,音信包蕴三个超链接链接到输出地方。

当实施脚本在“console”标签内体现一个荒谬,而不当的提醒行左侧出现多个暗日光黄的圆点时(图7-8),大家得以单击改红点在该行设置一个断点。

 

假诺您把“Inspect”开关按下,效率正好相反,在页面中移动鼠标,则当前来得区域的源代码会被加亮显示出来。在图5-5中,大家能够看出鼠标指针正指向“方块二”,而在源代码中得以看来,“方块二”的源代码“<div id="div2">``方块二</div>”已被加亮显示(巴黎绿部分)。要是您单击某些展现区域,则该区域的源代码会被入选。

自动完结上多少个至关心爱抚要字

  

音信区域以平常字体呈现

$(id)

Ctrl+,

将刀口切换来Scripts菜单

Page Down

 

Return

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

 

 

Show XML Errors

命令行 (大)

显示XMLHttpRequests。

单击属性

 

表1

 

debug(fn)

 

修改一下test函数的代码,测量检验一下运转一千次巡回须要有个别时间:

 

 

编写属性

Ctrl+Shift+L

 

按上涨的幅度1削减数值

“Edit”按键作用和HTML的“Edit”功用类似。

  

Up

机关完成下二个重大字

Text Size:Decrease text size

将刀口切换来Watch编辑

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

Down

  

 
事例最终源代码:

 

单击“Clear”按键可清除调整台的支配新闻。

Allowed Sites

 

 

菜单选项

本文首假使为初学者介绍一下Firebug的基本成效与什么运用Firebug。由于自己水平与力量简单,在篇章中的恐怕会有一些不清荒谬与遗漏,希望大家能包容和指正!

大家来看多个例证,文件源代码如下:

单击作用区第二栏的“Console”标签可切换成调控台(图4-1)。调整台的效应是展现各样错误音信(可在Options里定义),彰显脚本代码中内嵌的控制台调节和测验音讯,通过命令行对脚本进行调节和测量检验,通过单击Profile对剧本实行品质测量试验。 调整台分多少个区域,二个是消息区,三个是命令行,通过Options菜单的“Larger Command Line”可改变命令行地方。

假设突显为革命的文本名,则表示该公文在服务器中不设有,无法下载,那样你将在检查一下文件的渠道是不是科学只怕是还是不是上传了该公文(图9-2海水绿圈住区域2)。

 

Esc

console.count([title])

起来对台本实行质量测验,title为测量试验标题。

是或不是想知道某些函数是从哪里调用的?console..trace可协助大家实行追踪。在test函数的结尾参加:

Disable Firebug for xxxxx

 

在“Style”标签里大家能够挑选“Options”菜单里的“Show Computed Style”查看浏览器默许的作风定义。

clear()

将音讯分组再出口到调节台。通过console.groupEnd()甘休分组。

Return

 

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

 

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

图5-10

终止名叫name的放大计时器并出口施行时间。

F12

完了编写制定

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:Firebug是Firefox下的一款开发类插件,马上就会在

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文