调试器开发中的12个技术,firefox插件Firebug的选用教程

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

2015/09/17 · HTML5,
JavaScript调试器开发中的12个技术,firefox插件Firebug的选用教程。 · 1
评论调试器开发中的12个技术,firefox插件Firebug的选用教程。 ·
调试

原稿出处:
惟吾德馨(@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是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩充插件。它可以用来调试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行为;

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。

皇家赌场手机版 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”菜单则是对所有开展了一个分拣。

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

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结构;第三个标签用于查看相应的Cookies。

皇家赌场手机版 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查看器会将页面上改动的情节页记录下来,并以灰色高亮表示。有了这一个效应,网页的暗箱操作将彻底变成历史。大家得以使用该功用查看其余网站的卡通效果是什么样兑现的。

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、Cookies.第二个标签用于查看传递给服务器的参数;第三个标签用于查看响应头新闻和请求头音信;第多个标签用于查看服务器再次来到的情节;第几个标签则是查看服务器重临的HTML结构;第多少个标签用于查占卜应的Cookies。

皇家赌场手机版 32

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

皇家赌场手机版 33

 相信广大从事Web开发工作的开发者都闻讯和选取过Firebug,但也许超过半数人还不知道,其实它是一个在网页设计方面效果相当强大的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript进行宏观的跟踪和调剂。它是Firefox浏览器的一个插件,所以指出各位Web开发者,要丰盛利用FireFox浏览器和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。还有用于调试Cookie的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.”, “鲍勃”, 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官方网站的牵线。

Leave a Comment.