调试器开发中的12个技巧,10分钟学会前端调试利器

调试器开发中的12个技巧,10分钟学会前端调试利器

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

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

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

笔者:惟吾德馨‘
原版的书文地址:http://www.cnblogs.com/allenben/p/4757274.html

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

概述

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

怎么着获得Firebug?

因为它是Firefox浏览器的1个增添插件,所以首先必要下载Firefox浏览器。读者可以访问www.mozilla.com下载并设置Firefox浏览器。安装实现后用它访问

进去下图所示页面。点击”添加到Firefox”,然后点击”立刻安装”,最终再度开动Firefox浏览器即可成功安装。

图片 1

图片 2

深信不疑广大从事Web开发工作的开发者都闻讯和选拔过Firebug,但大概超过四分之一人还不了解,其实它是一个在网页设计方面效果非凡强劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript举行宏观的跟踪和调试。它是Firefox浏览器的3个插件,所以建议各位Web开发者

主面板

安装到位之后,在Firefox浏览器的地方后方就会有三个小虫子的图标图片 3。单击该图标后即可进行Firebug的控制台,也足以由此火速键<F12>来开辟控制台。使用Ctrl+F12连忙键能够使Firebug独立打开三个窗口而不占用Firefox页面底部的空中。

图片 4

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

支配台面板:用于记录日志、大概浏览、错误提醒和执行命令行,同时也用于Ajax的调节;

HTML面板:用于查看HTML元素,能够实时地编辑HTML和转移CSS样式,它归纳三个子面板,分别是体制、布局和DOM面板;

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

本子面板:用于显示Javascript文件及其所在的页面,也能够用来突显Javascript的Debug调节和测试,包罗3个子面板,分别是监督检查、堆栈和断点;

DOM面板:用于呈现页面上的有所目的;

网络面板:用于监视互连网移动,可以帮忙查看三个页面包车型客车载入意况,包罗文件下载所占据的小运和文件下载出错等音讯,也能够用来监视Ajax行为;

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


 

概述

FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个恢弘插件。它能够用来调节和测试JavaScript、查看DOM、分析CSS、监察和控制互联网流量以及进行Ajax交互等。它提供了差不离前端开发须要的满贯意义。

官方网站:www.getfirebug.com

 

  控制台面板

1.操纵台面板大概浏览

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

2.记录日志

Firebug提供如下几个常用的笔录日志的函数:

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

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

console.error:在新闻前显示错误图标,并且附上行号的超链接;

console.info:在音讯前展现音信图标,并且附上行号的超链接;

console.warn:在纤细钱展现警告图标,并且附行号的超链接。

在空白的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。

图片 5

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>

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

图片 6

Firebug控制台还提供了其余职能,例如检查和测试函数执行时间、新闻分组、测试驱动、跟踪、计数以及查看Javascript概略等。更加多材质能够访问.

4.面板内的子菜单

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

图片 7

“清除”用于破除控制埃德蒙顿的内容。“保持”则是把控制马尔默的内容保留,尽管刷新了依旧还留存。“全体”则是突显任何的新闻。前边的“错误”、“警告”、“音信”、“调节和测试消息”、“Cookies”菜单则是对拥有开始展览了二个分类。

“概略”菜单用于查看函数的属性。上边通过1个例子来演示,代码如下:

JavaScript

<button type=”button” id=”btn1″>执行循环1</button>
<button type=”button” id=”btn2″>执行循环2</button>
<button type=”button” id=”btn3″>执行循环3</button>
<script type=”text/javascript”> var f1=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<一千;j++); } function f2(){ for(var i
=0;i<1000;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>

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>

开辟页面,展现两个按钮:

图片 8

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

图片 9

从上海教室中得以看到,出现了一行字,“概略收集中。再一次点击“概略”查看结果。”,接着,依次单击“执行循环1”、“执行循环2”、“执行循环3”八个按钮各二遍,并再一次单击“概略菜单”,即可看到如下图所示结果:

图片 10

可以观望Firebug彰显出了丰硕详细的告诉。包含各样函数的函数名、调用次数、占用时间的比例、占用时间、时间、平均时间、最时辰间、最大时间以及各州的文件的行数等音信。

5.Ajax调试

决定台面板也可用于Ajax调节和测试,在早晚水准上能够取代互联网面板。例如我打开一个页面,能够在Firebug控制台看到本次Ajax的Http请求头消息和服务器响应头消息。如下图,它会来得出本次使用的Ajax的GET方法、地址、耗费时间以及调用Ajax请求的代码行数。最首要的是有五个标签,即参数、头音信、响应、HTML、Cookies.第③个标签用于查看传递给服务器的参数;第二个标签用于查看响应头新闻和伸手头消息;第多少个标签用于查看服务器重回的始末;第拾贰个标签则是翻开服务器重返的HTML结构;第伍个标签用于查占卜应的Cookies。

图片 11

比方看不到任何音信的产出,恐怕是将此功用关闭了,能够单击“控制台”旁边的下拉箭头,将“展现XMLHttpRequests”前边的勾勾选上即可。

图片 12

怎么赢得Firebug?

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

进去下图所示页面。点击”添加到Firefox”,然后点击”立时安装”,最终重复开动Firefox浏览器即可成功安装。

图片 13

   

HTML面板

1.查看和修改HTML代码

Html面板的强有力之处便是能查看和修改HTML代码,而且那么些代码都以通过格式化的。下边以作者的贰个浏览器主页来做讲解。

图片 14

在页面高粱红色部分代表成分自身,日光黄表示padding部分,青黄表示margin部分。同时能够实时地丰富、修改和删除HTML节点以及品质,如下图所示。此外,单击script节点还足以一贯查看脚本,此处的剧本无论是内嵌在HTML中照旧外表导入的,都足以查看到。同样这也适用于<style>标签内嵌恐怕导入的CSS样式和动态创设HTML代码。

图片 15

在HTML控制台的左手能够观察任何页面当前的文书档案结构,能够透过单击“+”来进展。当单击相应的因素时,左边面板中就会展现出当下因素的体制、布局以及DOM新闻。而当光标移动到HTML树中相应元素上时,上边页面中相应的要素将会被高亮展现。

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

图片 16

在HTML控制台的右侧可以看到全部页面当前的文档结构,可以因此单击“+”来开始展览。当单击相应的成分时,左边面板中就会显示出近年来成分的体裁、布局以及DOM新闻。而当光标移动到HTML树中相应成分上时,上面页面中相应的成分将会被高亮呈现。

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

2.查看(Inspect)

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

图片 17

当单击”Inspect”按钮后,用鼠标在网页上入选三个要素时,成分会被2个深黄的层面住,同时下面包车型大巴HTML面板中相应的HTML树也会开始展览并且高亮展现。再度单击后即可退出该格局,并且底部的HTML树也保障在这几个状态。通过那么些职能,能够连忙搜索页面内的要素,调节和测试和搜索相应代码十分便宜。刷新网页后,页面展现的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”按钮可以用于直接编辑选中的HTML代码,而背后凸显的是现阶段因素在漫天DOM中的结构路径。

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

由此JavaScript来改变样式属性的值能够完结都部队分卡通效果。打开页面后,利用查看(Inspect)功用来抉择相应的HTML代码,例如,选中“要闻”,如下图所示:

图片 18

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

图片 19

由此上海体育场合能够看来,HTML查看器会将页面上改变的剧情页记录下来,并以黄绿色高棉亮代表。有了那些意义,网页的潜规则将彻底成为历史。大家得以接纳该意义查看其他网站的动画片效果是什么样落实的。

4.翻看和修改成分的体裁

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

图片 20

单击“布局”面板即可知到此因素具体的布局属性,那是3个正经的盒模型。通过“布局”面板,可以很容易地观望成分的偏移量、外边距、边框、内边距和要素的莫斯中国科学技术大学学、宽度等音讯,如下图所示:

图片 21

5.查看DOM的信息

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

主面板

设置到位之后,在Firefox浏览器的地方后方就会有1个小虫子的图标。单击该图标后即可开始展览Firebug的控制台,也得以因而急忙键<F12>来开辟控制台。使用Ctrl+F12神速键能够使Firebug独立打开一个窗口而不占用Firefox页面底部的半空中。

图片 23

从上海体育场所中可以看来,Firebug包含7个面板:

  • 控制台面板:用以记录日志、大概浏览、错误提示和执行命令行,同时也用于Ajax的调节;
  • HTML面板:用来查看HTML成分,能够实时地编辑HTML和转移CSS样式,它包蕴二个子面板,分别是体制、布局和DOM面板;
  • CSS面板:用来查看全体页面上的CSS文件,能够动态地修改CSS样式,由于HTML面板中一度包罗了一个CSS面板,由此该面板将很少用到;
  • 剧本面板:用于显示Javascript文件及其所在的页面,也得以用来突显Javascript的Debug调试,包括三个子面板,分别是监察和控制、堆栈和断点;
  • DOM面板:用以展现页面上的有所指标;
  • 网络面板:用来监视互连网活动,可以协协助调查看3个页面包车型地铁载入景况,包蕴文件下载所占有的小运和文书下载出错等音讯,也得以用于监视Ajax行为;
  • Cookies面板:用来查看和调动cookie(供给安装下文财富中所提到的Firecookie)。

 

CSS、DOM和网络面板

那3个面板相对于前方1个面板比较次要,CSS和DOM面板与HTML面板中右边的面板效率相似,但不如HTML面板灵活,因而一般选拔得很少。

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

图片 24

单击CSS面板后就能够分级查占星应的体裁。此处展开的体裁都以因此格式化的,适合于上学CSS的代码格式和专业。

而在网络面板中,相对有一部分强有力的功用,例如打开有些网站首页,Firebug展现效果如下图所示:

图片 25

该页面能够监视每一项成分的加载景况,包蕴剧本,图片等的轻重以及加载用时等,对于页面优化有着极其首要的意思。

其余,顶部还是能够分类查看成分的HTML、CSS、JS等的加载意况,使分析进而灵活。

支配台面板

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

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

  • console.log粗略的笔录日志;
  • console.debug笔录调试消息,并且附上行号的超链接;
  • console.error在新闻前呈现错误图标,并且附上行号的超链接;
  • console.info在音信前体现新闻图标,并且附上行号的超链接;
  • console.warn在纤细钱呈现警告图标,并且附行号的超链接。

在空白的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。

图片 26

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>

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

图片 27

Firebug控制台还提供了别样职能,例如检查和测试函数执行时间、音信分组、测试驱动、跟踪、计数以及查看Javascript概况等。越来越多材质能够访问这里

4.面板内的子菜单

控制台面板内有一排子菜单,分别是去掉、保持、轮廓、全体等。

图片 28

“清除”用于破除控制苏州的内容。“保持”则是把控制斯特拉斯堡的内容保留,尽管刷新了如故还存在。“全部”则是显得整个的新闻。后边的“错误”、“警告”、“音信”、“调节和测试新闻”、“Cookies”菜单则是对全体开始展览了二个分类。

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

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

打开页面,展现多少个按钮:

图片 29

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

图片 30

从上图中得以看看,出现了一行字,“概略收集中。再一次点击“轮廓”查看结果。”,接着,依次单击“执行循环1”、“执行循环2”、“执行循环3”多个按钮各二回,玉石俱焚复单击“概略菜单”,即可看到如下图所示结果:

图片 31

能够看到Firebug展现出了要命详细的告知。包涵各种函数的函数名、调用次数、占用时间的百分比、占用时间、时间、平均时间、最时辰间、最大日子以及外省的文件的行数等消息。

5.Ajax调试

操纵台面板也可用来Ajax调节和测试,在自但是然程度上能够替代网络面板。例如笔者打开叁个页面,能够在Firebug控制台看到本次Ajax的Http请求头音信和服务器响应头新闻。如下图,它会显示出此次使用的Ajax的GET方法、地址、耗费时间以及调用Ajax请求的代码行数。最重点的是有5个标签,即参数、头消息、响应、HTML、库克ies.第3个标签用于查看传递给服务器的参数;第四个标签用于查看响应头消息和伸手头音信;第⑧个标签用于查看服务器重回的剧情;第多少个标签则是查看服务器再次回到的HTML结构;第5个标签用于查占星应的库克ies。

图片 32

要是看不到任何音讯的面世,或然是将此成效关闭了,能够单击“控制台”旁边的下拉箭头,将“彰显XMLHttpRequests”前边的勾勾选上即可。

图片 33

 相信广大从业Web开发工作的开发者都闻讯和应用过Firebug,但只怕超越58%人还不通晓,其实它是3个在网页设计方面效果十二分强大的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript实行完善的跟踪和调节和测试。它是Firefox浏览器的2个插件,所以建议各位Web开发者,要丰裕利用Fire福克斯浏览器和Firebug插件实行普通的调剂工作。本文选用了11个Web开发者应该控制的Firebug的低档应用技巧,介绍给我们。

  脚本面板

剧本面板不仅能够查看页面内的脚本,而且还有强大的调节和测试成效。

在剧本面板的出手有“监察和控制”、“堆栈”和“断点”八个面板,利用Firebug提供的安装断掉的效率,能够很便宜地调节和测试程序,如下图所示:

图片 34

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代码,能够在此地安装断点。比如在第⑥行那句代码后边单击一下,那它后边就碰面世三个茶青的圆点,表示此处已经被安装了断点。此时,在右手断点面板的断点列表中就应运而生了刚刚设置的断点。假使想一时禁止使用某些断点,能够在断点列表中去掉某些断点的前面的复选框中的勾,那么此时左手面板中相应的断点就从红蓝色变成了红桔黑灰了。

图片 35

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

图片 36

那儿JavaScript内容上方的图片 37多个按钮已经变得可用了。它们各自代表“继续执行”、“单步进入”、“单步跳过”和“单步退出”。

继续执行<F8>:当通过断点来终止执行脚本时,单击<F8>就会回复执行脚本。

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

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

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

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

图片 38

图片 39

从上海教室可以见见,当鼠标移动到“lab”变量上时,就能够来得出它的始末是二个DOM成分,即“div#messageLabel”。

此刻将右边面板切换成“监察和控制”面板,那里列出了多少个变量,包含“this”指针的对准以及“lab”变量。单击“+”能够见到详细的新闻。展现如下:

图片 40

2.规格断点

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

图片 41

最后单击页面包车型客车“Click
Here”按钮。能够发现,脚本在“arr==5”这几个表明式为真时停下了,因而“5”以及后来的数字没有呈现到页面中。下图分别是健康职能和装置了规范断点之后的来得效果相比较:

图片 42图片 43

HTML面板

1.翻看和改动HTML代码

Html面板的精锐之处正是能查看和改动HTML代码,而且那么些代码都以透过格式化的。上面以笔者的2个浏览器主页来做教师。

图片 44

在HTML控制台的左手能够观望任何页面当前的文书档案结构,能够经过单击“+”来展开。当单击相应的因素时,左边面板中就会议及展览示出当下因素的体制、布局以及DOM新闻。而当光标移动到HTML树中相应成分上时,下边页面中相应的要素将会被高亮呈现。
比如,将光标移动到1个<P>标签上,展现效果如下图所示:

图片 45

在页面藕蓝色部分代表成分本身,松石绿表示padding部分,紫天青表示margin部分。同时可以实时地抬高、修改和删除HTML节点以及质量,如下图所示。此外,单击script节点仍是能够一贯查看脚本,此处的台本无论是内嵌在HTML中还是外部导入的,都足以查阅到。同样那也适用于<style>标签内嵌恐怕导入的CSS样式和动态创制HTML代码。

图片 46

2.查看(Inspect)

动用查看(Inspect)功用,能够飞快地查找到有些成分的HTML结构,如图:

图片 47

当单击”Inspect”按钮后,用鼠标在网页上入选多个因素时,成分会被1个赫色的范畴住,同时上边包车型客车HTML面板中相应的HTML树也会实行并且高亮显示。再一次单击后即可退出该情势,并且底部的HTML树也维持在这些情景。通过那么些功用,能够高速搜索页面内的因素,调节和测试和寻找相应代码非常方便。刷新网页后,页面展现的还是是用Inspect选中的区域。

HTML面板下方的“编辑”按钮能够用于直接编辑选中的HTML代码,而背后突显的是时下因素在方方面面DOM中的结构路径。

3.翻看DOM中被剧本更改的有的

经过JavaScript来改变样式属性的值能够做到部分卡通效果。打开页面后,利用查看(Inspect)作用来接纳相应的HTML代码,例如,选中“要闻”,如下图所示:

图片 48

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

图片 49

透过上海教室能够看看,HTML查看器会将页面上改变的始末页记录下来,并以暗蓝高亮代表。有了那个效用,网页的潜规则将干净成为历史。大家得以采纳该意义查看别的网站的动画片效果是怎么样兑现的。

4.翻看和修改元素的样式

在右手的样式面板中,展现了此元素当前颇具的体制。全体的体裁都能够实时地剥夺和修改,如下图所示,通过在”text-align:center“前单击会并发禁止使用的记号,那样就足以禁止使用此规则。通过直接在样式value值上单击就足以修改。

图片 50

单击“布局”面板即可看出此因素具体的布局属性,那是贰个专业的盒模型。通过“布局”面板,能够很简单地观察成分的偏移量、外边距、边框、内边距和因素的惊人、宽度等新闻,如下图所示:

图片 51

5.查看DOM的信息

单击“DOM”面板后得以观察此因素的详细的DOM音讯以及函数和事件,如下图所示:

图片 52

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

资源

快捷键:按<F12>能够快速开启Firebug,假如想获得完整的火速键列表,能够访问.

标题:假若设置进度中相遇了难堪,可以查阅Firebug的Q&A,网址为.

Firebug插件:Firebug除了自个儿强大的作用之外,还有基于Firebug的插件,它们用于扩大Firebug的功用。比如谷歌集团开发Page
Speed插件,开发人士可以运用它来评估他们网页的品质,并取得有关怎么样立异质量的提出。Yahoo公司开发的用来检查和测试页面全部品质的YSlow和用于调节和测试PHP的FirePHP。还有用于调节和测试Cookie的Firecookie等。

CSS、DOM和互联网面板

那二个面板相对于前方3个面板相比次要,CSS和DOM面板与HTML面板中右边的面板作用相似,但不如HTML面板灵活,因而一般选取得很少。

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

图片 53

单击CSS面板后就足以独家查占卜应的体制。此处展开的体制都以经过格式化的,适合于学习CSS的代码格式和专业。

而在互联网面板中,相对有一部分强有力的功力,例如打开有些网站首页,Firebug展现效果如下图所示:

图片 54

该页面能够监视每一项成分的加载情形,包含剧本,图片等的大小以及加载用时等,对于页面优化有着极其主要的含义。

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

  不清楚诸位有无遭受过如此的状态,在3个扑朔迷离的HTML页面中,当您想找有个别页面成分的实在对应的HTML时,你只可以在一大堆HTML代码中去寻觅,十一分麻烦。有了Firebug,未来你只要求在页面中,用鼠标右键选中某些成分,然后在弹出的菜谱中,采取“查看成分”,马上就会在HTML页面代码中找到该因素对应的代码了,拾贰分有益,如下图所示:

总结

经过本文的就学,读者能够控制Firebug的基本功用。Firebug已经慢慢改为三个调剂平台,而不仅是1个简单的Firefox扩展插件。学好Firebug能给现在的读书和做事提供一定的赞助。

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

1 赞 3 收藏 1
评论

图片 55

本子面板

本子面板不仅能够查阅页面内的脚本,而且还有强大的调剂功用。

在剧本面板的入手有“监察和控制”、“堆栈”和“断点”多个面板,利用Firebug提供的设置断掉的效益,能够很方便地调节和测试程序,如下图所示:

图片 56

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代码,可以在那里安装断点。比如在第5行那句代码后边单击一下,这它前边就会产出1个暗褐的圆点,表示此处已经被安装了断点。此时,在右手断点面板的断点列表中就应运而生了刚刚设置的断点。要是想暂且禁止使用有些断点,能够在断点列表中去掉有些断点的眼下的复选框中的勾,那么此时左手面板中相应的断点就从红血牙红变成了红花赤褐了。

图片 57

安装完断点之后,我们就足以调试程序了。单击页面中的“Click
Here”按钮,能够看看剧本截止在用谈铅色底色标出的那一行上。此时用鼠标移动到某个变量上即可彰显此时那些变量的value。展现效果如下:

图片 58

此刻JavaScript内容上方的五个按钮已经变得可用了。它们分别代表“继续执行”、“单步进入”、“单步跳过”和“单步退出”。

  • 继续执行<F8>当通过断点来终止执行脚本时,单击<F8>就会回复执行脚本。
  • 单步进入<F11>同意跳到页面中的别的函数内部。
  • 单步跳过<F10>单击<F10>来一贯跳过函数的调用即跳到return之后。
  • 单步退出<shift+F11>同意恢复生机脚本的实施,直到下2个断点截至。

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

图片 59

图片 60

从上海体育场面能够看看,当鼠标移动到“lab”变量上时,就能够来得出它的始末是三个DOM成分,即“div#messageLabel”。

那时将右手面板切换来“监察和控制”面板,那里列出了多少个变量,包括“this”指针的对准以及“lab”变量。单击“+”能够见到详细的新闻。突显如下:

图片 61

2.规则断点

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

图片 62

终极单击页面包车型大巴“Click Here”按钮。能够发现,脚本在“arr==5”那么些表明式为真时停下了,由此“5
”以及之后的数字没有展现到页面中。下图分别是正规职能和设置了条件断点之后的来得效果相比较:

图片 63

图片 64

 

资源

快捷键:<F12>能够便捷开启Firebug,假诺想博得完整的飞快键列表,能够访问这里

问题:若是设置进程中相遇了艰苦,能够查阅Firebug的Q&A

Firebug插件:
Firebug除了自个儿强大的机能之外,还有基于Firebug的插件,它们用于扩张Firebug的功用。比如谷歌(Google)公司开发Page
Speed插件,开发职员能够应用它来评估他们网页的质量,并获得有关如何改正质量的提出。Yahoo公司开发的用来检查和测试页面全部质量的YSlow和用于调节和测试PHP的FirePHP。还有用于调节和测试Cookie的Firecookie等。

图片 65

总结

由此本文的求学,读者能够通晓Firebug的基本功用。Firebug已经日趋变成三个调剂平台,而不只是一个回顾的Firefox扩大插件。学好Firebug能给未来的上学和办事提供一定的扶助。

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

 

  同样,也提供了更高效的法门:只需求点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug控制夏洛特就及时显得移动时通过的HTML成分的代码:

 

图片 66

  二 、能够行使Firebug修改HTML和CSS

  通过Firebug,能够直接修改HTML,扩张HTML的性质,删除成分,扩展CSS样式及贯彻更加多职能,如下图:

图片 67

  在上图的菜单中能够领略看出,你能够对HTML成分实行各样各种的改动操作,方法是先点击HTML部分的代码,然后鼠标右键即可在弹出的菜谱中实行操作。

  叁 、能够通过Firebug查看DOM成分和对XML实行操作

  当打开八个HTML页通过Firebug查看HTML代码时,你能够同时点在控制面板中的DOM树,就会以DOM的树型结构情势来看任何HTML的构造。而假如您是开拓了3个XML文件,那么鼠标右键点XML文件中的任何3个成分,在弹出的菜系中相同能够挑选对XML进行有关操作,如下图:

发表评论

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

网站地图xml地图