10分钟学会前端调试利器,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
从业了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的渴求。要写出了不起的HTML代码;要编写精致的CSS样式表呈现每个页面模块;要调节
javascript给页面扩张部分更活泼的元素;要接纳Ajax给用户带来更好的心得。一个可观的WEB开发人士要求兼顾更多层面,才能交出一份同样杰出的功课。为扶持广大正处在Web2.0洪流中的开发人员,在那边为咱们介绍一款轻巧灵活的帮扶开发工具。

概述

  FireBug是一个用来网站前端开发的工具,它是Fire福克斯浏览器的一个伸张插件。它能够用来调试JavaScript、查看DOM、分析CSS、监控网络流量以及开展Ajax交互等。它提供了大致前端开发需要的整个效能。官方网站:www.getfirebug.com

哪些得到Firebug?

因为它是Firefox浏览器的一个恢宏插件,所以首先需求下载Firefox浏览器。读者可以访问www.mozilla.com下载并设置Firefox浏览器。安装到位后用它访问

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

亚洲必赢官网 1

亚洲必赢官网 2

深信广大从事Web开发工作的开发者都听说和应用过Firebug,但或许大多数人还不亮堂,其实它是一个在网页设计方面机能极度强劲的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript进行完善的跟踪和调剂。它是Firefox浏览器的一个插件,所以提议各位Web开发者

Firebug是Firefox下的一款开发类插件,现属于Firefox的头等强力推荐插件之一。它集HTML查看和编排、
Javascript控制台、网络意况监视器于一体,是支付JavaScript、CSS、HTML和Ajax的得力帮手。Firebug似乎一把精巧的瑞士联邦军刀,从各种分化的角度分析Web页面内部的底细层面,给Web开发者带来很大的造福。这是一款令人欣赏的插件,若是你在此之前并未接触过它,也许在阅读本文之后,会有一试的欲望。小编在小说此文的时候,正逢Firebug发表1.0业内版,那必须说是种巧合。

主面板

安装已毕未来,在Firefox浏览器的地址后方就会有一个小虫子的图标亚洲必赢官网 3。单击该图标后即可开展Firebug的控制台,也可以通过快速键<F12>来打开控制台。使用Ctrl+F12火速键可以使Firebug独立打开一个窗口而不占用Firefox页面底部的长空。

亚洲必赢官网 4

从上图中可以看出,Firebug包蕴7个面板:

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

HTML面板:用于查看HTML元素,能够实时地编辑HTML和更改CSS样式,它概括3个子面板,分别是样式、布局和DOM面板;

CSS面板:用于查看所有页面上的CSS文件,可以动态地修改CSS样式,由于HTML面板中早已蕴涵了一个CSS面板,因而该面板将很少用到;

本子面板:用于突显Javascript文件及其所在的页面,也得以用来凸显Javascript的Debug调试,包蕴3个子面板,分别是监控、堆栈和断点;

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

网络面板:用于监视网络移动,可以帮衬查看一个页面的载入意况,包涵文件下载所占用的时日和文件下载出错等消息,也可以用来监视Ajax行为;

库克(Cook)ies面板:用于查看和调整cookie(要求设置下文资源中所提到的Firecookie)。


 

概述

FireBug是一个用以网站前端开发的工具,它是Fire福克斯(Fox)浏览器的一个恢弘插件。它可以用来调试JavaScript、查看DOM、分析CSS、监控网络流量以及进行Ajax交互等。它提供了大致前端开发须求的总体效率。

官方网站:www.getfirebug.com

 

应用
Firebug插件就算效用强大,不过它已经和Firefox浏览器无缝地组成在一块,使用简易直观。若是您担心它会占用太多的系统资源,也可以方便地启用/关闭那些插件,甚至针对一定的站点开启这一个插件。

  控制台面板

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

“清除”用于破除控制纽伦堡的内容。“保持”则是把控制塞内加尔达喀尔的内容保留,尽管刷新了照旧还留存。“全体”则是显得任何的新闻。后边的“错误”、“警告”、“音讯”、“调试音信”、“库克ies”菜单则是对负有开展了一个分拣。

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

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

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请求的代码行数。最重点的是有5个标签,即参数、头新闻、响应、HTML、Cookies.首个标签用于查看传递给服务器的参数;首个标签用于查看响应头新闻和伸手头新闻;首个标签用于查看服务器重回的情节;第四个标签则是翻开服务器再次来到的HTML结构;第八个标签用于查占星应的库克(Cook)ies。

亚洲必赢官网 11

假定看不到任何音讯的出现,可能是将此功效关闭了,可以单击“控制台”旁边的下拉箭头,将“显示XMLHttpRequests”后边的勾勾选上即可。

亚洲必赢官网 12

何以收获Firebug?

因为它是Firefox浏览器的一个增添插件,所以首先要求下载Firefox浏览器。读者可以访问www.mozilla.com下载并安装Firefox浏览器。安装达成后用它访问这里

进入下图所示页面。点击”添加到Firefox”,然后点击”马上安装”,最后重复启航Firefox浏览器即可成功安装。

亚洲必赢官网 13

   

在安装好插件之后,先用Firefox浏览器打开须求测试的页面,然后点击右下方的紫色按钮或采用飞速键F12唤出Firebug插件,它会将近日页面分成上下四个框架,如图1所示。

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”按钮后,用鼠标在网页上入选一个要素时,元素会被一个蓝色的规模住,同时下边的HTML面板中相应的HTML树也会进展并且高亮突显。再度单击后即可退出该方式,并且底部的HTML树也有限支撑在那几个场馆。通过这些效应,可以很快搜索页面内的要素,调试和摸索相应代码相当有利。刷新网页后,页面呈现的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”按钮可以用于直接编辑选中的HTML代码,而背后突显的是近来元素在全方位DOM中的结构路径。

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

由此JavaScript来改变样式属性的值可以达成部分动画效果。打开页面后,利用查看(Inspect)作用来抉择相应的HTML代码,例如,选中“要闻”,如下图所示:

亚洲必赢官网 18

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

亚洲必赢官网 19

通过上图可以见见,HTML查看器会将页面上改动的内容页记录下来,并以黄色高亮表示。有了这几个功效,网页的暗箱操作将干净变成历史。大家可以使用该功效查看其余网站的卡通效果是怎么样贯彻的。

10分钟学会前端调试利器,10分钟学会前端调试利器。4.查看和修改元素的样式

在右手的体制面板中,浮现了此元素当前抱有的体裁。所有的体裁都可以实时地剥夺和改动,如下图所示,通过在”text-align:center”前单击会出现禁用的标记,那样就足以禁用此规则。通过一贯在样式value值上单击就可以修改。

亚洲必赢官网 20

单击“布局”面板即可知到此因素具体的布局属性,那是一个正式的盒模型。通过“布局”面板,可以很不难地看到元素的偏移量、外边距、边框、内边距和因素的莫大、宽度等音讯,如下图所示:

亚洲必赢官网 21

5.查看DOM的信息

单击“DOM”面板后方可知到此因素的事无巨细的DOM音讯以及函数和事件,如下图所示:亚洲必赢官网 22

主面板

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

亚洲必赢官网 23

从上图中得以见到,Firebug包蕴7个面板:

  • 操纵台面板:用于记录日志、概览、错误提醒和执行命令行,同时也用于Ajax的调试;
  • HTML面板:用以查看HTML元素,可以实时地编辑HTML和改变CSS样式,它包蕴3个子面板,分别是体制、布局和DOM面板;
  • CSS面板:用以查看所有页面上的CSS文件,可以动态地修改CSS样式,由于HTML面板中已经包括了一个CSS面板,由此该面板将很少用到;
  • 剧本面板:用来呈现Javascript文件及其所在的页面,也足以用来突显Javascript的Debug调试,包蕴3个子面板,分别是监督、堆栈和断点;
  • DOM面板:用于浮现页面上的具备目标;
  • 网络面板:用来监视网络移动,可以支持查看一个页面的载入景况,包涵文件下载所占有的时刻和文书下载出错等信息,也足以用于监视Ajax行为;
  • Cookies面板:用以查看和调动cookie(要求安装下文资源中所提到的Firecookie)。

 

图1:Firebug插件展开图示

CSS、DOM和网络面板

那3个面板相对于前方2个面板比较次要,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、库克(Cook)ies.第二个标签用于查看传递给服务器的参数;第三个标签用于查看响应头新闻和伸手头音信;第多个标签用于查看服务器再次回到的始末;第七个标签则是翻开服务器重临的HTML结构;第七个标签用于查看相应的Cookies。

亚洲必赢官网 32

倘若看不到任何音信的出现,可能是将此效用关闭了,能够单击“控制台”旁边的下拉箭头,将“突显XMLHttpRequests”前边的勾勾选上即可。

亚洲必赢官网 33

 相信广大转业Web开发工作的开发者都闻讯和行使过Firebug,但可能半数以上人还不晓得,其实它是一个在网页设计方面机能分外强劲的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript进行完善的跟踪和调节。它是Firefox浏览器的一个插件,所以提出各位Web开发者,要充裕利用Fire福克斯(Fox)浏览器和Firebug插件进行日常的调节工作。本文选用了12个Web开发者应该明白的Firebug的起码应用技巧,介绍给咱们。

亚洲必赢官网 34

  脚本面板

本子面板不仅可以查看页面内的剧本,而且还有强大的调节功效。

在剧本面板的右手有“监控”、“堆栈”和“断点”三个面板,利用Firebug提供的装置断掉的功用,可以很便利地调试程序,如下图所示:

亚洲必赢官网 35

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行那句代码前边单击一下,那它前边就会晤世一个黄色的圆点,表示此处已经被设置了断点。此时,在右侧断点面板的断点列表中就涌出了刚刚设置的断点。借使想临时禁用某个断点,可以在断点列表中去掉某个断点的先头的复选框中的勾,那么此时左手面板中相应的断点就从红肉色变成了红灰紫色了。

亚洲必赢官网 36

安装完断点之后,大家就足以调试程序了。单击页面中的“Click
Here”按钮,可以看看剧本甘休在用谈蓝色底色标出的那一行上。此时用鼠标移动到某个变量上即可突显此时那一个变量的value。显示效果如下:

亚洲必赢官网 37

那时JavaScript内容上方的亚洲必赢官网 38三个按钮已经变得可用了。它们各自表示“继续执行”、“单步进入”、“单步跳过”和“单步退出”。

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

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

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

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

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

亚洲必赢官网 39

亚洲必赢官网 40

从上图可以见见,当鼠标移动到“lab”变量上时,就足以显得出它的始末是一个DOM元素,即“div#messageLabel”。

这时将右手面板切换来“监控”面板,那里列出了多少个变量,包蕴“this”指针的针对以及“lab”变量。单击“+”可以见到详细的信息。呈现如下:

亚洲必赢官网 41

2.尺度断点

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

亚洲必赢官网 42

最后单击页面的“Click
Here”按钮。可以发现,脚本在“arr==5”那些表明式为真时停下了,因而“5”以及今后的数字没有展示到页面中。下图分别是常规作用和安装了标准断点之后的展现效果相比较:

亚洲必赢官网 43亚洲必赢官网 44

HTML面板

1.翻看和改动HTML代码

Html面板的强硬之处就是能查看和改动HTML代码,而且那个代码都是通过格式化的。上面以自家的一个浏览器主页来做讲解。

亚洲必赢官网 45

在HTML控制台的左手可以见到任何页面当前的文档结构,可以通过单击“+”来进展。当单击相应的因素时,左边面板中就会来得出当下因素的体制、布局以及DOM新闻。而当光标移动到HTML树中相应元素上时,上边页面中相应的要素将会被高亮突显。
诸如,将光标移动到一个<P>标签上,显示效果如下图所示:

亚洲必赢官网 46

在页面中粉红色部分代表元素本身,藏蓝色表示padding部分,青色表示margin部分。同时可以实时地加上、修改和删除HTML节点以及性能,如下图所示。其余,单击script节点还足以平昔查看脚本,此处的剧本无论是内嵌在HTML中仍然外部导入的,都足以查阅到。同样那也适用于<style>标签内嵌或者导入的CSS样式和动态创制HTML代码。

亚洲必赢官网 47

2.查看(Inspect)

运用查看(Inspect)效能,可以神速地搜索到某个元素的HTML结构,如图:

亚洲必赢官网 48

当单击”Inspect”按钮后,用鼠标在网页上入选一个因素时,元素会被一个粉红色的局面住,同时下边的HTML面板中相应的HTML树也会展开并且高亮显示。再度单击后即可退出该情势,并且尾部的HTML树也维持在那么些意况。通过那几个作用,可以高速搜索页面内的因素,调试和查找相应代码非凡方便。刷新网页后,页面显示的照样是用Inspect选中的区域。

HTML面板下方的“编辑”按钮可以用于间接编辑选中的HTML代码,而背后突显的是当下因素在全体DOM中的结构路径。

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

由此JavaScript来改变样式属性的值可以已毕部分动画片效果。打开页面后,利用查看(Inspect)功效来抉择相应的HTML代码,例如,选中“要闻”,如下图所示:

亚洲必赢官网 49

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

亚洲必赢官网 50

因此上图可以看到,HTML查看器会将页面上改动的内容页记录下来,并以藏黑色高亮代表。有了那个效应,网页的暗箱操作将根本变成历史。大家得以运用该成效查看其余网站的动画片效果是哪些贯彻的。

4.查看和修改元素的体制

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

亚洲必赢官网 51

单击“布局”面板即可知到此因素具体的布局属性,那是一个正式的盒模型。通过“布局”面板,可以很不难地观看元素的偏移量、外边距、边框、内边距和要素的惊人、宽度等消息,如下图所示:

亚洲必赢官网 52

5.查看DOM的信息

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

亚洲必赢官网 53

  1、使用Firebug可以找到页面中的任何内容

从图1中见到,Firebug有6个重点的Tab按钮,下文将重点介绍介绍这几方面的职能。
Console HTML CSS Script Dom Net
控制台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络情况监视

资源

火速键:按<F12>可以长足开启Firebug,就算想赢得完整的火速键列表,可以访问.

问题:如若设置进程中遇到了辛苦,可以查阅Firebug的Q&A,网址为.

Firebug插件:Firebug除了本身强大的成效之外,还有基于Firebug的插件,它们用于扩大Firebug的功力。比如谷歌(Google)公司支付Page
Speed插件,开发人士可以使用它来评估他们网页的特性,并收获有关怎么样创新性能的提出。Yahoo集团支付的用来检测页面全体性能的YSlow和用于调试PHP的FirePHP。还有用于调试Cookie的Firecookie等。

CSS、DOM和网络面板

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

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

亚洲必赢官网 54

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

而在网络面板中,相对有部分有力的效用,例如打开某个网站首页,Firebug显示效果如下图所示:

亚洲必赢官网 55

该页面可以监视每一项元素的加载情状,包蕴剧本,图片等的轻重以及加载用时等,对于页面优化有着极其主要的意义。

其余,顶部还是可以分类查看元素的HTML、CSS、JS等的加载情状,使分析进而灵敏。

  不清楚诸位有无遇到过那样的气象,在一个复杂的HTML页面中,当你想找某个页面元素的实际上对应的HTML时,你只可以在一大堆HTML代码中去找寻,非常难为。有了Firebug,现在你只须要在页面中,用鼠标右键选中某个元素,然后在弹出的菜系中,拔取“查看元素”,立即就会在HTML页面代码中找到该因素对应的代码了,非常有益,如下图所示:

Console 控制台
控制台可以浮现当前页面中的javascript错误以及警告,并提示出错的文本和行号,方便调试,那几个不当提醒比起浏览器本身提供的不当提醒越发详细且具备参考价值。而且在调试Ajax应用的时候也是特意有用,你可以在控制台里看到每一个XMLHttpRequests请求post出去的参数、
URL,http头以及回馈的内容,原本如同在暗中黑匣子里运行的次第被明晰地浮现在你面前。

总结

透过本文的学习,读者可以操纵Firebug的基本成效。Firebug已经逐步成为一个调试平台,而不光是一个大致的Firefox扩充插件。学好Firebug能给未来的就学和办事提供一定的佑助。

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

1 赞 3 收藏 1
评论

亚洲必赢官网 56

本子面板

本子面板不仅可以查看页面内的脚本,而且还有强大的调剂作用。

在剧本面板的入手有“监控”、“堆栈”和“断点”七个面板,利用Firebug提供的安装断掉的效劳,可以很有利地调试程序,如下图所示:

亚洲必赢官网 57

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代码,可以在此处安装断点。比如在第6行那句代码后边单击一下,那它前边就会冒出一个灰色的圆点,表示此处已经被安装了断点。此时,在左边断点面板的断点列表中就涌出了刚刚设置的断点。若是想临时禁用某个断点,可以在断点列表中去掉某个断点的后边的复选框中的勾,那么此时左手面板中相应的断点就从红藏蓝色变成了红灰绿色了。

亚洲必赢官网 58

设置完断点之后,我们就能够调试程序了。单击页面中的“Click
Here”按钮,可以见到剧本截至在用谈粉色底色标出的那一行上。此时用鼠标移动到某个变量上即可突显此时以此变量的value。显示效果如下:

亚洲必赢官网 59

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

  • 继续执行<F8>当通过断点来终止实施脚本时,单击<F8>就会还原执行脚本。
  • 单步进入<F11>同意跳到页面中的其余函数内部。
  • 单步跳过<F10>单击<F10>来一贯跳过函数的调用即跳到return之后。
  • 单步退出<shift+F11>允许苏醒脚本的施行,直到下一个断点截止。

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

亚洲必赢官网 60

亚洲必赢官网 61

从上图可以看来,当鼠标移动到“lab”变量上时,就可以突显出它的内容是一个DOM元素,即“div#messageLabel”。

那儿将右手面板切换来“监控”面板,那里列出了多少个变量,包蕴“this”指针的针对以及“lab”变量。单击“+”可以见到详细的音信。突显如下:

亚洲必赢官网 62

2.尺度断点

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

亚洲必赢官网 63

说到底单击页面的“Click Here”按钮。能够发现,脚本在“arr==5”那个表明式为真时停下了,由此“5
”以及后来的数字尚未出示到页面中。下图分别是正常职能和设置了规范断点之后的显得效果相比较:

亚洲必赢官网 64

亚洲必赢官网 65

 

象C shell或Python
shell一样,你仍能在控制西安查阅变量内容,直接运行javascript语句,即使是大段的javascript程序也可以正确运行并获得运行期的音讯。

资源

快捷键:亚洲必赢官网 ,按<F12>可以便捷开启Firebug,倘使想得到完整的飞速键列表,可以访问这里

问题:假设设置进程中相见了诸多不便,可以查看Firebug的Q&A

Firebug插件:
Firebug除了我强大的成效之外,还有基于Firebug的插件,它们用于增添Firebug的效用。比如谷歌(Google)集团开发Page
Speed插件,开发人士可以动用它来评估他们网页的特性,并取得有关怎么着改善性能的提出。Yahoo公司开发的用于检测页面全体性能的YSlow和用来调试PHP的FirePHP。还有用于调试库克ie的Firecookie等。

亚洲必赢官网 66

操纵台还有个紧要的机能就是查看脚本的log,
往日你也许习惯了运用alert来打印变量,但是Firebug给大家带来了一个新情人
—— console.log, 最简单易行的打印日志的语法是那样的:

总结

通过本文的读书,读者可以操纵Firebug的基本功效。Firebug已经日趋改为一个调试平台,而不仅是一个粗略的Firefox增加插件。学好Firebug能给将来的读书和做事提供一定的佑助。

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

 

console.log(”hello world”)

  同样,也提供了更敏捷的格局:只须求点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中活动时,在Firebug控制弗罗茨瓦夫就当下显得移动时通过的HTML元素的代码:

若果您有一堆参数要求组合在共同输出,可以写成这么:

 

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

亚洲必赢官网 67

Firebug的日志输出有多种可选的格式以及语法,甚至足以定制彩色输出,比起单调的alert,明显越发有益于,限于篇幅,那里不做详细表达,但是有志于进步debug功用的读者,可以到Firebug的官方站点(见附录)查看更详尽的学科。

  2、可以选择Firebug修改HTML和CSS

图2: 在支配台里调试javascript

  通过Firebug,可以间接修改HTML,增加HTML的习性,删除元素,增添CSS样式及贯彻更多职能,如下图:

亚洲必赢官网 68

亚洲必赢官网 69

查阅和修改HTML
第一遍探望Firebug强大的HTML代码查看器,就觉着它更加,比较于Firefox自带的HTML查看器,它的效能强大了诸多。
HTML

  在上图的食谱中得以领会看到,你可以对HTML元素举办多种多样的修改操作,方法是先点击HTML部分的代码,然后鼠标右键即可在弹出的食谱中开展操作。

首先你见到的是已经经过格式化的HTML代码,它有明晰的层次,你可以方便地识别出每一个标签之间的依附并行关系,标签的折叠成效可以协助您集中精力分析代码。源代码上方还标记出了DOM的层系,如图3所示,它知道地列出了一个hml元素的parent、child以及root元素,协作Firebug自带的CSS查看器使用,会给div+css页面分析编写带来很大的好处。你仍是可以在HTML查看器中一向改动HTML源代码,并在浏览器中第一时间看到修改后的职能,光凭这点就会让洋洋页面设计师至死不渝地变成Firebug的粉丝了。

  3、可以透过Firebug查看DOM元素和对XML进行操作

有时候页面中的javascript会按照用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景观,HTML查看器会将页面上改动的情节也抓下来,并以棕色高亮标记,让网页的暗箱操作彻底成为历史。

  当打开一个HTML页通过Firebug查看HTML代码时,你可以同时点在控制面板中的DOM树,就会以DOM的树型结构格局看看任何HTML的布局。而若是你是开辟了一个XML文件,那么鼠标右键点XML文件中的任何一个要素,在弹出的菜单中同样可以挑选对XML举办相关操作,如下图:

行使Inspect检查功效,大家仍能用鼠标在页面中一向拔取一些区块,查看相应的HTML源代码和CSS样式表,真正的形成所见即所得,假诺您利用了表面编辑器修改了当前网页,可以点击Firebug的reload图片重新载入网页,它会持续跟踪你以前用Inspect选中的区块,方便调试。

亚洲必赢官网 70

图3::HTML查看器

  4、使用Firebug调试Javascript代码

亚洲必赢官网 71

  在Firebug控制罗利,倘使要举办调试Javascript代码,只需要首先将Script控制面版启动,然后在点击Console按钮,在下拉菜单中精选呈现Javascipt及HTML错误(还是可以让用户选用彰显越多的荒谬),接着在尾部会发现出现>>>的箭头,在此处,你可以输入Javascipt代码,输入后,立即按回车键,就足以实施了,至极利于,如下图:

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

亚洲必赢官网 72

今昔的网页设计言必称div+css,假若你是用table套出来的HTML页面,就得按这规矩重构三遍,否则显得你不够前卫!用div做出来的页面的确能简单HTML代码,HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重心。Firebug的CSS查看器不仅自下向上列出每一个
CSS样式表的依附继承关系,还列出了每一个样式在哪个样式文件中定义。你能够在这些查看器中平素抬高、修改、删除一些CSS样式表属性,并在方今页面中直接看出修改后的结果。

  一个小技巧是,在输入Javascipt的时候,还援助使用tab键的自动完成提示功用,比如对于一个很长的Javascipt函数,在没输入完的时候如若按tab键firebug就会赞助你活动补充完整。

一个顶尖的采纳就是页面中的一个区块地方彰显有些不太方便,它必要活动多少个象素。那时候用CSS调试工具得以肆意编辑它的义务——你可以依照要求自由活动象素。
如图4中正在修改一个区块的背景观。

5、很多次加载页面后Firebug会记得加载前的岗位

提示:即使你正在上学CSS样式表的行使,可是总记不住常用的样式表有哪些值,可以品尝在CSS调试器中当选一个体裁表属性,然后用前后方向键来改变它的值,它会把可能的值一个个遍历给你看。

  无论你再一次加载多少次页面,Firebug在每趟加载页面后总会协调记得加载前页面所在的地点(比如你早已在浏览页面的最底层,此时再加载页面,则新的页面加载后,如故把您带到页面尾部)。

图4: CSS查看器,可以一向改动样式表

 

亚洲必赢官网 73

6、使用$标记去便利访问变量

可视化的CSS尺标
大家可以应用Firebug来查看页面中某一区块的CSS样式表,要是越来越进行右边Layout
tab的话,它会以标尺的方式将眼前区块占用的面积清楚地标识出来,精确到象素,更令人惊讶的是,你可见在那些可视化的界面中直接修改各象素的值,页面上区块的任务就会随改动而变化。在页面中某些因素出现错位或者面积当先预料值时,该意义可以提供一蹴而就的相助,你可以籍此分析offset、margin、
padding、size之间的涉嫌,从而找出解决问题的艺术。

  在上边的第4点中,大家提到了在>>>这一个命令行下能够举办Javascript的调试,而其余一个技能是足以行使如$1去拜访曾经造访过的变量中的末了一个,如此类推,可以选取$2访问曾经走访过的变量中的尾数第四个。如下图:

图5:Firebug中的CSS标尺

亚洲必赢官网 74

亚洲必赢官网 75

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

网络处境监视器

或许有一天,你的小业主依旧客户找到您,抱怨你打造的网页速度奇慢,你该怎么作答?你也许会说那或许是网络问题,或者是电脑配置问题,或者是程序太慢,或者直说是他俩的人品问题?不管怎么说,最终你恐怕被需求去解决这一个有多种可能的题目。

网络情状监视器能帮您解决那些困难问题。Firebug的网络监视器同样是效能强大的,它能将页面中的CSS、javascript以及网页中引用的图片载入所开支的时日以矩状图显示出来,也许在此处您能一把揪出拖慢了你的网页的祸首,进而对网页举行调优,最终首席执行官满足客户喜爱,你的职业也由此而不衰。

网络监视器还有一部分任何细节功用,比如预览图片,查看每一个表面文件甚至是xmlHttpRequests请求的http头等等。

图6:网络境况监视器
亚洲必赢官网 76

  在Firebug中,只要你改改过页面中的内容,就会以灰色高亮度突显已经修改过的情节,如下图:

Javascript调试器

那是一个很不利的javascript脚本调试器,占用空间不大,可是单步调试、设置断点、变量查看窗口一个浩大。正所谓麻雀虽小,五脏俱全。

如若你有一个网站已经建成,不过它的javascript有总体性上的题目如故不是太圆满,可以通过面板上的Profile来统计每段脚本运行的时间,查看究竟是哪些语句执行时间过长,一步步革除问题。

图7:javascript调试器
亚洲必赢官网 77

亚洲必赢官网 78

DOM查看器

DOM(Document Object
Model)里头包含了大气的Object以及函数、事件,在在此此前,你要想从中查到需求的始末,绝非易事,那好比你去了一个宏伟的体育场馆,想要找到几本名字不太适合的小书,众多的接纳会让你不知道该怎么做。而选用Firebug的DOM查看器却能便民地浏览DOM的内部结构,协助您快捷稳定DOM对象。双击一个
DOM对象,就可以编辑它的变量或值,编辑的还要,你恐怕会意识它还有自动完结功用,当您输入document.get之后,按下tab键就能补齐为
document.getElementById,极度方便。假若你以为补齐得不够理想,按下shift+tab又会復苏原状。用了Firebug的
DOM查看器,你的javascript从此找到了促使的目的,Web开发也许就成了一件乐事。

图8: Dom查看器
亚洲必赢官网 79

  8、监视Javascript的运作性能

小结

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

  在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使用详解六
  • 胆大无比的WEB开发好助手FireBug(Firefox
    Plugin)
  • js之WEB开发调试利器:Firebug
    下载
  • FireBug 调试JS入门教程
    怎样调节JS

亚洲必赢官网 80
▲(点击图片查看大图)

9、Firebug强大的网络数据监视功用

  Firebug还提供了很是功效强大的网络数据监功效。开发者在支付web应用时,平时要着眼各样HTTP请求和回答,在那方面Firebug的职能非凡强硬。首先,只须要打开控制面板中的网络功用,然后在每一遍运行页面时,都足以清楚看到种种HTTP的请求和HTTP回应的现实性细节。如下图:

亚洲必赢官网 81
▲(点击查阅大图)

  在上图中,只要点每一个呼吁旁边的+号,就可以见见该请求的有血有肉细节,如下图:

亚洲必赢官网 82

  可以看看,能见到HTTP的头顶的各类新闻。同样,若是要看脚下页面中的比如图片,FLASH等要素的新闻等,也得以经过上图去点差其他选项卡去筛选查看,相当有益。

  10、使用Firebug的Log功能

  在设计页面时,日常要记录下页面的有些音讯,那么些时候,能够利用Firebug中的log日志功效,把一部分音讯输出到firebug的控制弗罗茨瓦夫,那样就便宜调试了。Firebug提供了一个console对象,在插件加载的时候就报了名到Javascript的运行条件中去了,可以在程序中直接使用。console对象提供了一个log方法,举例表达如下:

亚洲必赢官网 83<script language=”javascript” type=”text/javascript”> 
亚洲必赢官网 84 console.log(‘This is log
message’);  
亚洲必赢官网 85 console.debug(‘This is debug
message’);  
亚洲必赢官网 86  console.error(‘This is error
message’);  
亚洲必赢官网 87  console.info(‘This is info
message’); 
亚洲必赢官网 88 console.warn(‘This is warning
message’);  
亚洲必赢官网 89</script>

   在Firefox中实施如下代码,会看到Firebug的控制马赛现身如下音信:

亚洲必赢官网 90

  可以看到,种种级其他日记输出,都包含一个五彩缤纷的图标,能给用户很显明的提示。同时,console.log
还援救格式化字符串的出口,你能够用接近C语言中printf的语法来调用那么些函数:console.log(“%s
is %d years old.”, “鲍勃(Bob)”, 42)。

  11、可以在Firebug中调试程序

  在Firebug控制台的的Javascript控制面板中,可以对页面中的Javascript进行调剂,方法很简单,只要求在要调节的行的左手单击,就会产出断点了,之后请记住上边常件的急迅键:

  (1)  F10 进入下一行;
(2)  F8继承调试;
(3)  F11跻身Javascript中的函数体调试;
(4)  Shift+F11跳出函数体。

亚洲必赢官网 91

  12、在Firebug中可以安装带条件的断点

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

亚洲必赢官网 92

  总结

  Firefox搭配Firebug在web程序设计中,可谓是“双剑合壁”,功效强大,本文只是挑选了中间的一部分技能予以介绍,更加多的请参见Firebug官方网站的介绍。

网站地图xml地图