10分钟学会前端调试利器,firefox插件Firebug的采取教程

by admin on 2019年2月1日

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

2015/09/17 · HTML5,
10分钟学会前端调试利器,firefox插件Firebug的采取教程。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浏览器即可成功安装。

必发88 1

必发88 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浏览器的地点后方就会有一个小虫子的图标必发88 3。单击该图标后即可举办Firebug的控制台,也能够因而火速键<F12>来开辟控制台。使用Ctrl+F12快速键可以使Firebug独立打开一个窗口而不占用Firefox页面底部的长空。

必发88 4

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

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

HTML面板:用于查看HTML元素,可以实时地编辑HTML和转移CSS样式,它包涵3个子面板,分别是体制、布局和DOM面板;

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

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

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

互联网面板:用于监视网络移动,可以扶助查看一个页面的载入情形,包罗文件下载所占据的日子和文件下载出错等音信,也足以用来监视Ajax行为;

Cookies面板:用于查看和调整cookie(须求设置下文资源中所提到的Firecookie)。


 

概述

FireBug是一个用以网站前端开发的工具,它是FireFox浏览器的一个恢弘插件。它能够用于调试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。

必发88 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>

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

必发88 6

Firebug控制台还提供了别样职能,例如检测函数执行时间、音信分组、测试驱动、跟踪、计数以及查看Javascript概况等。更加多材料可以访问.

4.面板内的子菜单

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

必发88 7

“清除”用于破除控制塞内加尔达喀尔的内容。“保持”则是把控制巴尔的摩的内容保留,就算刷新了依旧还存在。“全部”则是显得整个的新闻。前边的“错误”、“警告”、“音讯”、“调试新闻”、“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<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>

打开页面,彰显多少个按钮:

必发88 8

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

必发88 9

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

必发88 10

可以看来Firebug显示出了万分详尽的告诉。包蕴各样函数的函数名、调用次数、占用时间的百分比、占用时间、时间、平均时间、最小时间、最大日子以及所在的公文的行数等音信。

5.Ajax调试

支配台面板也可用来Ajax调试,在任天由命程度上得以代表网络面板。例如我打开一个页面,可以在Firebug控制台看到这一次Ajax的Http请求头音信和服务器响应头新闻。如下图,它会突显出此次使用的Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最保护的是有5个标签,即参数、头音信、响应、HTML、Cookies.第四个标签用于查看传递给服务器的参数;第四个标签用于查看响应头音信和伸手头音讯;第一个标签用于查看服务器重临的情节;第四个标签则是翻开服务器重返的HTML结构;第七个标签用于查六柱预测应的Cookies。

必发88 11

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

必发88 12

怎么着取得Firebug?

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

进去下图所示页面。点击”添加到Firefox”,然后点击”马上安装”,最后再次开动Firefox浏览器即可形成安装。

必发88 13

   

在设置好插件之后,先用Firefox浏览器打开须要测试的页面,然后点击右下方的肉色按钮或利用飞快键F12唤出Firebug插件,它会将眼前页面分成上下多少个框架,如图1所示。

HTML面板

1.查看和改动HTML代码

Html面板的强硬之处就是能查看和修改HTML代码,而且这么些代码都是由此格式化的。下边以我的一个浏览器主页来做讲解。

必发88 14

在页面中黑色部分代表元素本身,灰色表示padding部分,红色表示margin部分。同时可以实时地抬高、修改和删除HTML节点以及质量,如下图所示。别的,单击script节点还足以向来查看脚本,此处的台本无论是内嵌在HTML中依旧外表导入的,都得以查看到。同样那也适用于<style>标签内嵌或者导入的CSS样式和动态创建HTML代码。

必发88 15

在HTML控制台的左侧可以看出整个页面当前的文档结构,可以通过单击“+”来进展。当单击相应的因素时,右边面板中就会显得出近日因素的样式、布局以及DOM音信。而当光标移动到HTML树中相应元素上时,上边页面中相应的因素将会被高亮显示。

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

必发88 16

在HTML控制台的左侧能够看到整个页面当前的文档结构,可以由此单击“+”来进展。当单击相应的因素时,左边面板中就会展现出近期元素的样式、布局以及DOM新闻。而当光标移动到HTML树中相应元素上时,下边页面中相应的因素将会被高亮突显。

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

2.查看(Inspect)

动用查看(Inspect)功能,可以快速地查找到某个元素的HTML结构,如图:

必发88 17

当单击”Inspect”按钮后,用鼠标在网页上入选一个因素时,元素会被一个青色的范畴住,同时下边的HTML面板中相应的HTML树也会举行并且高亮呈现。再一次单击后即可退出该形式,并且底部的HTML树也维持在这一个情景。通过那么些功能,可以连忙搜索页面内的因素,调试和寻找相应代码极度便利。刷新网页后,页面突显的仍然是用Inspect选中的区域。

HTML面板下方的“编辑”按钮可以用来直接编辑选中的HTML代码,而后边呈现的是当前因素在全方位DOM中的结构路径。

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

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

必发88 18

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

必发88 19

因而上图可以寓目,HTML查看器会将页面上改变的情节页记录下来,并以黄色高亮代表。有了那些职能,网页的暗箱操作将彻底成为历史。大家可以采取该意义查看其余网站的动画片效果是什么落到实处的。

4.翻看和改动元素的体裁

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

必发88 20

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

必发88 21

5.查看DOM的信息

单击“DOM”面板后得以看到此因素的事无巨细的DOM音讯以及函数和事件,如下图所示:必发88 22

主面板

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

必发88 23

从上图中得以看看,Firebug包涵7个面板:

  • 支配台面板:用于记录日志、概览、错误提醒和执行命令行,同时也用于Ajax的调试;
  • HTML面板:用以查看HTML元素,能够实时地编辑HTML和改变CSS样式,它包涵3个子面板,分别是体制、布局和DOM面板;
  • CSS面板:用来查看所有页面上的CSS文件,可以动态地修改CSS样式,由于HTML面板中曾经包罗了一个CSS面板,因而该面板将很少用到;
  • 剧本面板:用于展现Javascript文件及其所在的页面,也得以用来突显Javascript的Debug调试,蕴含3个子面板,分别是监控、堆栈和断点;
  • DOM面板:10分钟学会前端调试利器,firefox插件Firebug的采取教程。用以浮现页面上的具备目的;
  • 网络面板:用来监视网络移动,能够接济查看一个页面的载入意况,蕴涵文件下载所占有的小时和文件下载出错等信息,也得以用来监视Ajax行为;
  • Cookies面板:用来查看和调整cookie(必要设置下文资源中所提到的Firecookie)。

 

图1:Firebug插件展开图示

CSS、DOM和互联网面板

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

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

必发88 24

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

而在互连网面板中,相对有部分强大的功能,例如打开某个网站首页,Firebug彰显效果如下图所示:

必发88 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。

必发88 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>

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

必发88 27

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

4.面板内的子菜单

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

必发88 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>

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

必发88 29

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

必发88 30

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

必发88 31

可以见到Firebug突显出了相当详尽的告知。包蕴每个函数的函数名、调用次数、占用时间的比重、占用时间、时间、平均时间、最时辰间、最大日子以及所在的文书的行数等音信。

5.Ajax调试

决定台面板也可用以Ajax调试,在肯定程度上得以取代互连网面板。例如我打开一个页面,可以在Firebug控制台看到本次Ajax的Http请求头音信和服务器响应头音信。如下图,它会来得出这次使用的Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最重大的是有5个标签,即参数、头新闻、响应、HTML、库克ies.第二个标签用于查看传递给服务器的参数;首个标签用于查看响应头音讯和请求头信息;第多少个标签用于查看服务器重返的情节;第七个标签则是查看服务器再次来到的HTML结构;第多个标签用于查六柱预测应的Cookies。

必发88 32

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

必发88 33

 相信广大从业Web开发工作的开发者都听说和运用过Firebug,但也许大多数人还不明白,其实它是一个在网页设计方面作用万分强大的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript进行周到的跟踪和调剂。它是Firefox浏览器的一个插件,所以提议各位Web开发者,要丰富利用FireFox浏览器和Firebug插件举办平常的调剂工作。本文采取了12个Web开发者应该控制的Firebug的低档应用技巧,介绍给大家。

必发88 34

  脚本面板

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

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

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

必发88 36

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

必发88 37

那会儿JavaScript内容上方的必发88 38三个按钮已经变得可用了。它们分别表示“继续执行”、“单步进入”、“单步跳过”和“单步退出”。

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

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

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

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

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

必发88 39

必发88 40

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

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

必发88 41

2.口径断点

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

必发88 42

末尾单击页面的“Click
Here”按钮。可以发现,脚本在“arr==5”那个表明式为真时停下了,因而“5”以及随后的数字没有突显到页面中。下图分别是正常职能和设置了标准化断点之后的来得效果相比较:

必发88 43必发88 44

HTML面板

1.翻看和改动HTML代码

Html面板的强劲之处就是能查看和改动HTML代码,而且这一个代码都是透过格式化的。上边以我的一个浏览器主页来做助教。

必发88 45

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

必发88 46

在页面中灰色部分代表元素本身,灰色表示padding部分,黄色表示margin部分。同时可以实时地丰富、修改和删除HTML节点以及质量,如下图所示。其余,单击script节点还是可以直接查看脚本,此处的本子无论是内嵌在HTML中依旧外表导入的,都得以查阅到。同样那也适用于<style>标签内嵌或者导入的CSS样式和动态创立HTML代码。

必发88 47

2.查看(Inspect)

选用查看(Inspect)作用,可以高速地寻找到某个元素的HTML结构,如图:

必发88 48

当单击”Inspect”按钮后,用鼠标在网页上当选一个要素时,元素会被一个红色的规模住,同时下边的HTML面板中相应的HTML树也会进展并且高亮突显。再一次单击后即可退出该格局,并且底部的HTML树也维持在这几个场所。通过那么些意义,可以火速搜索页面内的因素,调试和寻找相应代码分外有益。刷新网页后,页面显示的照旧是用Inspect选中的区域。

HTML面板下方的“编辑”按钮能够用来直接编辑选中的HTML代码,而前面突显的是眼前元素在全方位DOM中的结构路径。

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

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

必发88 49

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

必发88 50

透过上图可以看看,HTML查看器会将页面上更改的内容页记录下来,并以藏蓝色高亮代表。有了那一个成效,网页的暗箱操作将干净变成历史。大家得以行使该意义查看别的网站的动画效果是何等完毕的。

4.翻看和改动元素的体裁

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

必发88 51

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

必发88 52

5.查看DOM的信息

单击“DOM”面板后方可观望此因素的详尽的DOM音信以及函数和事件,如下图所示:

必发88 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面板特有的一个作用就是足以分别详细查看页面中内嵌以及动态导入的样式。如下图所示:

必发88 54

单击CSS面板后就足以分级查算命应的体制。此处展开的体裁都是经过格式化的,适合于学习CSS的代码格式和专业。

而在互联网面板中,相对有一对有力的功能,例如打开某个网站首页,Firebug突显效果如下图所示:

必发88 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
评论

必发88 56

本子面板

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

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

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

必发88 58

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

必发88 59

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

  • 继续执行<F8>当通过断点来终止执行脚本时,单击<F8>就会卷土重来执行脚本。
  • 单步进入<F11>允许跳到页面中的其他函数内部。
  • 单步跳过<F10>单击<F10>必发88,来直接跳过函数的调用即跳到return之后。
  • 单步退出<shift+F11>同意復苏脚本的履行,直到下一个断点截止。

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

必发88 60

必发88 61

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

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

必发88 62

2.条件断点

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

必发88 63

末尾单击页面的“Click Here”按钮。可以发现,脚本在“arr==5”这一个表达式为真时停下了,由此“5
”以及随后的数字尚未出示到页面中。下图分别是例行功效和安装了准星断点之后的来得效果比较:

必发88 64

必发88 65

 

象C shell或Python
shell一样,你还可以在控制博洛尼亚查阅变量内容,直接运行javascript语句,就终于大段的javascript程序也可以正确运行并得到运行期的新闻。

资源

快捷键:<F12>可以很快开启Firebug,若是想得到完整的火速键列表,可以访问这里

问题:只要设置进程中相见了费力,可以查看Firebug的Q&A

Firebug插件:
Firebug除了本身强大的效率之外,还有基于Firebug的插件,它们用于扩展Firebug的功效。比如谷歌(Google)公司支付Page
Speed插件,开发人员可以利用它来评估他们网页的特性,并赢得有关怎么着改良品质的提议。Yahoo集团费用的用于检测页面全体质量的YSlow和用来调试PHP的FirePHP。还有用于调试Cookie的Firecookie等。

必发88 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).

必发88 67

Firebug的日记输出有种种可选的格式以及语法,甚至可以定制彩色输出,比起单调的alert,显明尤其有益,限于篇幅,那里不做详细表明,不过有志于升高debug功能的读者,可以到Firebug的官方站点(见附录)查看更详细的教程。

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

图2: 在控制台里调试javascript

  通过Firebug,可以平昔改动HTML,扩张HTML的属性,删除元素,增添CSS样式及贯彻越多职能,如下图:

必发88 68

必发88 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选中的区块,方便调试。

必发88 70

图3::HTML查看器

  4、使用Firebug调试Javascript代码

必发88 71

  在Firebug控制博洛尼亚,即使要推行调试Javascript代码,只须要首先将Script控制面版启动,然后在点击Console按钮,在下拉菜单中精选展现Javascipt及HTML错误(还是能让用户挑选呈现越来越多的一无所长),接着在底层会意识出现>>>的箭头,在此处,你可以输入Javascipt代码,输入后,马上按回车键,就可以执行了,分外便于,如下图:

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

必发88 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查看器,可以一贯改动样式表

 

必发88 73

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

可视化的CSS尺标
大家得以应用Firebug来查阅页面中某一区块的CSS样式表,即使进一步展开右边Layout
tab的话,它会以标尺的款型将近年来区块占用的面积清楚地标识出来,精确到象素,更令人惊叹的是,你可以在那几个可视化的界面中平素改动各象素的值,页面上区块的职位就会随改动而转变。在页面中或多或少因素出现错位或者面积大于预料值时,该作用可以提供实用的赞助,你可以籍此分析offset、margin、
padding、size之间的涉及,从而找出解决难点的形式。

  在地点的第4点中,我们提到了在>>>那个命令行下可以进行Javascript的调剂,而除此以外一个技能是足以行使如$1去拜谒曾经走访过的变量中的最后一个,如此类推,可以接纳$2访问曾经造访过的变量中的尾数首个。如下图:

图5:Firebug中的CSS标尺

必发88 74

必发88 75

  7、Firebug会高亮度突显修改过的始末

网络情状监视器

可能有一天,你的小业主仍然客户找到你,抱怨你打造的网页速度奇慢,你该怎么回复?你也许会说那说不定是网络难点,或者是电脑配置难题,或者是程序太慢,或者直说是他们的人品难题?不管怎么说,最终你恐怕被需求去解决那几个有多种或许的题材。

网络境况监视器能帮您解决那么些老大难难题。Firebug的互连网监视器同样是功效强大的,它能将页面中的CSS、javascript以及网页中援引的图样载入所开支的日子以矩状图显示出来,也许在那边您能一把揪出拖慢了你的网页的元凶,进而对网页进行调优,最终业主满足客户喜爱,你的生意也因而而坚如磐石。

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

图6:互联网意况监视器
必发88 76

  在Firebug中,只要你改改过页面中的内容,就会以风流高亮度呈现已经修改过的内容,如下图:

Javascript调试器

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

比方您有一个网站已经建成,不过它的javascript有质量上的题目依旧不是太完善,可以经过面板上的Profile来统计每段脚本运行的时日,查看究竟是哪些语句执行时间过长,一步步革除难题。

图7:javascript调试器
必发88 77

必发88 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查看器
必发88 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

必发88 80
▲(点击图片查看大图)

9、Firebug强大的互联网数据监视效能

  Firebug还提供了格外作用强大的互连网数据监作用。开发者在付出web应用时,平常要考察各种HTTP请求和答复,在那地点Firebug的作用格外有力。首先,只要求打开控制面板中的网络功效,然后在历次运行页面时,都足以精通看出种种HTTP的伏乞和HTTP回应的求实细节。如下图:

必发88 81
▲(点击查阅大图)

  在上图中,只要点每一个请求旁边的+号,就可以见到该请求的现实细节,如下图:

必发88 82

  可以见见,能来看HTTP的尾部的各样信息。同样,借使要看眼前页面中的比如图片,FLASH等元素的新闻等,也可以透过上图去点分裂的选项卡去筛选查看,极度福利。

  10、使用Firebug的Log功能

  在统筹页面时,日常要记录下页面的一对新闻,这几个时候,可以拔取Firebug中的log日志功用,把一些信息输出到firebug的控制斯特拉斯堡,那样就便宜调试了。Firebug提供了一个console对象,在插件加载的时候就登记到Javascript的运作条件中去了,可以在先后中直接选择。console对象提供了一个log方法,举例表达如下:

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

   在Firefox中实践如下代码,会看出Firebug的控制莱比锡冒出如下消息:

必发88 90

  可以看看,各种级其余日志输出,都富含一个绚丽多姿的图标,能给用户很明朗的提示。同时,console.log
还扶助格式化字符串的出口,你可以用类似C语言中printf的语法来调用这几个函数:console.log(“%s
is %d years old.”, “鲍伯”, 42)。

  11、可以在Firebug中调试程序

  在Firebug控制台的的Javascript控制面板中,可以对页面中的Javascript举办调剂,方法很简单,只须要在要调节的行的左手单击,就会合世断点了,之后请记住下边常件的快速键:

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

必发88 91

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

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

必发88 92

  总结

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

发表评论

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

网站地图xml地图