firebug怎么用 三

鲜活优惠码继续之前的firebug怎么用 一 firebug怎么用 二，本文依然是转载，无出处。

这里要提醒大家一下，

在HTML里调试出正确的源代码和CSS后，

别忘记将源代码和CSS的修改结果复制到你的源代码文件中，

不然你的调试结果在页面刷新后会付之东流。

切记！切记！

6、 查看CSS定义

将功能区第二行的标签切换到“CSS”，

在这里我们可以查看页面中所有的CSS定义，

包括链接的CSS文件。

通过功能区的文件选择按钮可以选择不同的含有CSS的文件（图6-1红色圈住部分）。

图6-1

CSS的定义的编辑这里就不再说明了，

这个可以参考HTML的“Style”操作。

“Edit”按钮功能和HTML的“Edit”功能类似。

7、 脚本调试

将功能区第二行的标签切换到“Script”，

在这里我们可以对页面中所有的脚本进行调试，

包括链接的脚本。

和CSS一样，

可以通过文件选择按钮选择不同的脚本文件。

如果要在脚本中设置一个断点，

可以单击行号旁边的空白区域，

这时会出现一个红色的点表示在这里设置了断点（图7-1），

当脚本运行到此会停止运行，

等待你的操作。

在右边的小窗口将标签切换到“Breakpoints”可以查看我们设置的所有断点（图7-2），

单击左上角的checkbox可以让断点不起作用，

如果要删除断点可以单击右上角的删除图标。

通过“Options”菜单的“Disable All Breakpoints”可暂时禁止所有断点，

而“Remove All Breakpoints”可删除所有断点。godaddy 优惠码 

在断点标记的红点上单击右键还可以设置断点条件，

在符合条件的时候才会停止脚本的执行。

图7-1

图7-2

下面我们来尝试一下断点的功能。

首先在测试页脚本里增加一个test的函数，

函数的主要操作是运行一个1000次的循环，

将循环的参数值显示在“div2”里：

function test(){

for(var i=0;i<1000;i++){

document.getElementById('div2').innerHTML=i;

}

}

在“div2”里增加一个“onclick”属性，

单击后执行test：

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

刷新页面，

然后在“for(var i=0;i<1000;i++){”这行上设置一个断点，

并设置条件为“i=100”（图7-3），

然后单击“div2”开始执行函数test。

图7-3

当脚本停下来后，我们将鼠标移动到变量“i”上，

这时会出现一个小方框，

里面有一个数值，

这就是变量“i“的当前值（图7-4）。

在脚本调试的时候，主机优惠码 

你可以通过这个方法很方便的了解到当前变量的值。

你还可以通过右边窗口的“Watch”标签查看到“i”的值（图7-5）。

图7-4

图7-5

在“Watch”标签窗口我们可以通过“Options”菜单选择查看用户自定义属性（Show User-defined Properties）、

用户自定义函数（Show User-defined Functions）、

DOM属性（Show DOM Properties）、

DOM函数(Show DOM Functions)和DOM常数(Show DOM Constants)。

我们还可以通过单击“New watch expression…”（图7-6淡黄色背景部分）加入自己想跟踪的内容。

例如我们想跟踪一下“div2”的显示内容，

就可以单击“New watch expression…”，

加入“document.getElementById('div2').innerHTML”，

输入中可通过TAB键自动完成关键字的输入（图7-7）。

如果不想跟踪了，

可单击最右边的删除图标取消跟踪。

图7-6

图7-7

脚本在断点停止后，

我们就可以利用搜索框旁的4个跟踪按钮进行代码跟踪了（图7-7）。

第一按钮是继续运行程序，

不再执行跟踪，

快捷键是F8。域名优惠码 

第二个按钮是单步执行方式，

每次执行一条语句，

该方式在遇到函数调用时不进入调用函数内部进行跟踪，

快捷键是F10。

第三个按钮也是单步执行方式，

每次执行一条语句，

但它遇到函数调用时会进入调用函数内部进行跟踪，

快捷键是F11。

当你进入调用函数内，

想马上跳出来时，

可以单击第四个按钮，

该按钮没有快捷键。

搜索框的作用和HTML源代码查看是一样的，

不过有一个不同，

就是输入“#n”（n≥1），

可以直接跳到脚本的第n行。

当执行脚本在“console”标签内显示一个错误，

而错误的提示行左边出现一个暗红色的圆点时（图7-8），

我们可以单击改红点在该行设置一个断点。

图7-8

我们可以通过“Script”标签的“Options”菜单的“Break on All Errors”选项设置每当脚本发生错误时就中断脚本，

进入调试状态。

有时候一个函数随机出现错误，

你不可能每次调用都去跟踪一次，

而产生错误的原因很可能是传递的参数错误，

这时你可以通过跟踪函数调用的功能去检查每次调用函数时的参数情况。

操作在函数脚本内单击鼠标右键，

在菜单中选择“Log Calls to xxxxx”（xxxxx为函数名），

然后可在“console”标签中可查看函数调用情况。

8、 查看DOM结构

将功能区第二行的标签切换到“DOM”可俺层次查看整个页面的DOM结构。

通过“Options”菜单可自定义选择查看用户自定义属性（Show User-defined Properties）、

用户自定义函数（Show User-defined Functions）、

DOM属性（Show DOM Properties）、

DOM函数(Show DOM Functions)或DOM常数(Show DOM Constants)等内容。

通过双击你可以修改DOM里面的属性值。

9、 查看网络状况

作为开发人员，

是否会经常听到老板或客户抱怨页面下载太慢了？

于是你就怀疑是否脚本太多了？

忘记压缩图片了？

服务器太慢了？

网络太慢？

确实是头疼的事情。

有了Firebug，

你就可以很容易的对这个问题进行分析和判断了。

请将Firebug的当前标签切换到“Net”（图9-1）。

图9-1

图9-2

从图中我们可以看到，

页面中每一个下载文件都用一个灰色条表示它相对其它文件是从什么时候开始下载的，

下载时间是多少。

在底部我们看到页面发送了多少个请求，

下载总量是多少，

有多少是有缓存的，

下载总共花费了多少时间等信息。

如果只想了解某一样文件的下载情况，

你可以单击功能区第一栏的文件分类按钮过滤文件（图9-2红色圈住区域1）。

将鼠标在文件中移动，

如果是图片，

我们可以看到图片的缩略图（图9-2红色圈住区域3）。

如果显示为红色的文件名，

则表示该文件在服务器中不存在，

不能下载，

这样你就要检查一下文件的路径是否正确或者是否上传了该文件（图9-2红色圈住区域2）。

我们可以展开某个文件，

查看它的HTTP头信息和返回结果的信息。

如果请求的是一个动态页面或XMLHttpRequest，

则还可以查看提交的变量。

通过查看提交的变量和返回信息，

我们可以很方便的调试程序是否正确提交了需要的变量和返回了正确的数据。

例如从图36中，

我们可以看到向“topics-remote.php”发送了一个请求，

提交的参数有“_dc”、“callback”、“limit”和“start”四个，

值分别为“1188637444000”、“stcCallback1001”、“25”与“0”，

从这里我们可以很方便的知道我们脚本操作提交的参数是否正确。

切换到“Response”页可以看到返回的结果（图9-3），

在这里你可以对返回结果进行检查。

如果你感觉在这里查看结果很乱，

你可以单击鼠标右键，

在弹出菜单中选择“Copy Response body”复制结果到编辑器查看，

你还可以选择“Open in New Tab”打开一个新标签浏览。

图9-3

通过右键菜单你可以复制文件地址（Copy Location）、

HTTP请求头信息(Copy Request Headers)和HTTP响应头信息（Copy Response Headers）。

如果不想使用该功能，

可以选择Options菜单的“Disable Network Monitoring”关闭该功能。

10、 命令行调试

在“Console”标签了有一个命令行工具，

我们可以在这里运行一些脚本对页面进行调试。

我们在命令行中输入“document.getElementById('div2').innerHTML”看看效果（图10-1），

别忘了用TAB键实现快速输入关键字。

在信息区显示了当前“div2”的显示内容。

图10-1

要输入“document.getElementById”是不是觉得很麻烦？

这里有一个简单的办法，

用“$”符号代替“document.getElementById”，

我们再在命令行中输入“$('div2').innerHTML”，

然后看看结果，

是一样（图10-2）。

图10-2

当你通过“Inspect”锁定了一些HTML Element时，

你可以通过“$1”来访问最后一个Element，

依次类推，

我们可以通过“$n”(n>1)访问依次倒序访问锁定的Element。

我们来实践一下，

刷新一下测试页面，

然后按下“Inspect”按钮，

鼠标单击“方块二”，

然后在按下“Inspect”按钮，

单击“方块一”。

将firebug窗口切换回“Console”标签，

然后输入“$1”，

回车后再输入“$2”，

查看一下结果（图10-3），

正是我们用锁定过的Element。

图10-3

在命令行还可以通过“$$(HTML 标记)”返回一个Element数组。

我们在测试页输入“$$(‘div’)”看看（图10-4）。

我们再输入“$$(‘div’)[0]”看看（图10-5）。

是不是很便于我们对HTML进行调试。

图10-4

图10-5

命令行的所有特殊函数请看表3：

命令

说明

$(id)

通过id返回Element。

$$(selector)

通过CSS选择器返回Element数组。

$x(xpath)

通过xpath表达式返回Element数组。

dir(object)

列出对象的所有属性，和在DOM标签页查看该对象的是一样的。

dirxml(node)

列出节点的HTML或XML的源代码树，和在HTML标签页查看改节点一样。

cd(window)

默认情况下，命令行相关的是顶层window对象，使用该命令可切换到frame里的window独享。

clear()

清空信息显示区，和单击按钮Clear功能一样。

inspect(object[, tabName])

监视一个对象。tabName表示在那个标签页对该对象进行监视，可选值为“html”、“css”、“script”和“dom”。

keys(object)

返回由对象的属性名组成的数组。

values(object)

返回由对象的属性值组成的数组。

debug(fn)

在函数的第一行增加一个断点。

undebug(fn)

移除在函数第一行的断点。

monitor(fn)

跟踪函数fn的调用。

unmonitor(fn)

不跟踪函数fn的调用。

monitorEvents(object[, types])

跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。

unmonitorEvents(object[, types])

不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。

profile([title])

开始对脚本进行性能测试，可选参数title将作为测试结果的标题。

profileEnd()

结束脚本性能测试。

表3

命令行有命令记忆功能，

可通过上、下箭头键选择已经输入过的命令。

11、 在脚本文件中加入调试命令

有没有对脚本调试中经常需要alert感到厌烦？

有了Firebug，

你就可以放下alert了，

因为Firebug有功能比alert更强大的console.log。

先让我们来认识一下console.log，

在测试文件脚本区域我们输入一下代码：

console.log('Hello');

刷新一下页面，

将firebug切换到“console”标签看看（图11-1），

在信息区显示出了我们要输出的信息“Hello”。

当然了，

单凭这个就说console.log有点夸大，

我们修改一下test函数，

把“document.getElementById('div2').innerHTML=i;”修改为：

console.log('当前的参数是：%d',i);

图11-1

刷新页面后看看结果（图11-2）。

是不是挺不错的？

console.log可以象c语言的printf一样实现格式化输出。

我们再在脚本区加入一个语句：

console.log(2,4,window,test,document);

图11-2

刷新页面后看看结果（图11-3）。

console.log可以连续输出多个对象，

而且如果对象是DOM、函数，

还可以直接点击去到该对象。

图11-3

如果你觉得console.log输出的文本太单调，

不能表示出不同的信息，

那么你可以通过console.debug、 console.info、 console.warn和console.error来代替console.log，

这些函数分别会用不同的背景颜色和文字颜色来显示信息。

我们来看看测试一下这些函数的输出，

在脚本中加入：

console.debug('This is console.debug!');

console.info('This is console.info!');

console.warn('This is console.warn!');

console.error('This is console.error!');

刷新页面看看结果（图11-4）。

图11-4

有时候，为了更清楚方便的查看输出信息，

我们可能需要将一些调试信息进行分组输出，

那么可以使用console.group来对信息进行分组，

在组信息输出完成后用console.groupEnd结束分组。

我们测试一下把刚才的4个输出作为一个分组输出，

修改代码为：

console.group('开始分组：');

console.debug('This is console.debug!');

console.info('This is console.info!');

console.warn('This is console.warn!');

console.error('This is console.error!');

console.groupEnd();

刷新页面看看结果（图11-5）。

在console.group中，

我们还可以加入一个组标题“开始分组：”。

如果需要，

我们还可以通过嵌套的方式，

在组内再分组。

图11-5

有时候，

我们需要写一个for循环列出一个对象的所有属性或者某个HTML Element下的所有节点，

有了firebug后，

我们不需要再写这个for循环了，

我们只需要使用console.dir(object)或console.dirxml(element)就可以了。

在测试页中加入代码测试一下：

console.dir(document.getElementById('div1'));

console.dirxml(document.getElementById('div1'));

结果请看图11-6和图11-7。

图11-6

图11-7

是否想知道代码的运行速度？

很简单，

使用console.time和console.timeEnd就可以。

修改一下test函数的代码，

测试一下运行1000次循环需要多少时间：

function test(){

console.time('test');

for(var i=0;i<1000;i++){

document.getElementById('div2').innerHTML=i;

//console.log('当前的参数是：%d',i);

}

console.timeEnd('test');

}

刷新页面，

单击“方块二”，

看看结果（图11-8）。

在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出，

而该参数就是信息的标题。

图11-8

是否想知道某个函数是从哪里调用的？

console..trace可帮助我们进行追踪。

在test函数的结尾加入：

console.trace();

刷新页面，

单击“方块二”，

看看结果（图11-9）。

结果显示是在坐标（97，187）的鼠标单击事件执行了test函数，

而调用的脚本是在simple.html文件里的第1行。

因为是在HTML里面的事件调用了test函数，

所以显示的行号是第1行。

如果是脚本，

则会显示调用脚本的行号，

通过单击可以直接去到调用行。

图11-9

如果想在脚本某个位置设置断点，

可以在脚本中输入“debugger”作为一行。

当脚本执行到这一行时会停止执行等待用户操作，

这时候可以通过切换到“Script”标签对脚本进行调试。

Firebug还有其它的一些调试函数，

这里就不一一做介绍，

有兴趣可以自己测试。

表4是所有函数的列表：

函数

说明

console.log(object[, object, ...])

向控制台输出一个信息。可以输入多个参数，输出将已空格分隔各参数输出。

第一参数可以包含格式化文本，例如：

console.log(‘这里有%d个%s’,count,apple);

字符串格式：

%s ：字符串。

%d, %i：数字。

%f： 浮点数。

%o -超链接对象。

console.debug(object[, object, ...])

向控制台输出一个信息，信息包含一个超链接链接到输出位置。

console.info(object[, object, ...])

向控制台输出一个带信息图标和背景颜色的信息，信息包含一个超链接链接到输出位置。

console.warn(object[, object, ...])

向控制台输出一个带警告图标和背景颜色的信息，信息包含一个超链接链接到输出位置。

console.error(object[, object, ...])

向控制台输出一个带错误图标和背景颜色的信息，信息包含一个超链接链接到输出位置。

console.assert(expression[, object, ...])

测试一个表示是否为true，如果为false，提交一个例外信息到控制台。

console.dir(object)

列出对象的所有属性。

console.dirxml(node)

列出HTML或XML Element的XML源树。

console.trace()

输出堆栈的调用入口。

console.group(object[, object, ...])

将信息分组再输出到控制台。通过console.groupEnd()结束分组。

console.groupEnd()

结束分组输出。

console.time(name)

创建一个名称为name的计时器，计算代码的执行时间，调用console.timeEnd(name)停止计时器并输出执行时间。

console.timeEnd(name)

停止名称为name的计时器并输出执行时间。

console.profile([title])

开始对脚本进行性能测试，title为测试标题。

console.profileEnd()

结束性能测试。

console.count([title])

计算代码的执行次数。titile作为输出标题。

表4

12、 在IE中使用Firebug

Firebug是Firefox的一个扩展，

但是我习惯在IE中调试我的页面怎么办？

如果在页面脚本中加入console.log()将调试信息写到Friebug，

在IE中肯定是提示错误的，

怎么办？

不用担心，

Frirebug提供了Frirbug Lite脚本，

可以插入页面中模仿Firebug控制台。

我们可以从一下地址下载firebug lite：

http://www.getfirebug.com/releases/firebuglite1.0-b1.zip

然后在页面中加入：

<script language="javascript" type="text/javascript" src="/路径/firebug.js"></script>

如果你不想在IE中模仿Friebug控制台，

只是不希望console.log()脚本出现错误信息，

那么在页面中加入一下语句：

<script language="javascript" type="text/javascript" src="/路径/firebugx.js"></script>

如果你不想安装Firebug Lite，

只是想避免脚本错误，

那么可以在脚本中加入以下语句：

if (!window.console || !console.firebug)

{

var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",

"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

window.console = {};

for (var i = 0; i < names.length; ++i)

window.console[names[i]] = function() {}

}

我们将firebug.js加入到测试页面中，

然后打开IE，

加载页面。

页面加载完成后，

我们按下F12键就可以打开控制台了。

每次页面刷新后，

你都要按F12键打开控制台，

是不是很烦？

如果不想那么，

就在html标签中加入“debug=’true’”，

例如：

<html debug="true">

在Friebug Lite中也有命令行，

但是功能没那么强。

13、 快捷键和鼠标操作

全局操作

打开Firebug窗口

F12

关闭Firebug窗口

F12

在新窗口打开Firebug

Ctrl+F12

往前切换标签

Ctrl+`

将光标移到命令行

Ctrl+Shift+L

将光标移到搜索框

Ctrl+Shift+K

进入Inspect模式

Ctrl+Shift+C

进行JavaScript性能测试

Ctrl+Shift+P

重新执行最后一条命令行命令

Ctrl+Shift+E

HTML标签

编辑属性

单击属性名或值

编辑文本节点

单击文本

编辑Element

双击Element标记

移到路径里的下一个节点

Ctrl+.

移到路径里的上一个节点

Ctrl+,

HTML编辑

完成编辑

Return

取消编辑

Esc

移到下一个区域

Tab

移到上一个区域

Shift+Tab

HTML Inspect 模式

取消Inspect

Esc

Inspect 父节点

Ctrl+Up

Inspect 子节点

Ctrl+Down

Script标签

继续运行

F5

Ctrl+/

单步执行（Step Over）

F10

Ctrl+'

单步执行（Step Into）

F11

Ctrl+;

退出函数（Step Out）

Shift+F11

Ctrl+Shift+;

设置断点

单击行号

禁止断点

在行号上Shift+Click

编辑断点条件

在行号上Right-Click

运行到当前行

在行号上Middle-Click

在行号上Ctrl+Click

移到堆栈中的下一个函数

Ctrl+.

移到堆栈中的上一个函数

Ctrl+,

将焦点切换到Scripts菜单

Ctrl+Space

将焦点切换到Watch编辑

Ctrl+Shift+N

DOM 标签

编辑属性

双击在空白

移到路径中下一个对象

Ctrl+.

移到路径中上一个对象

Ctrl+,

DOM 和Watch编辑

结束编辑

Return

取消编辑

Esc

自动完成下一个属性

Tab

自动完成上一个属性

Shift+Tab

CSS标签

编辑属性

单击属性

插入新属性

双击空白处

移动焦点到Style Sheets菜单

Ctrl+Space

CSS编辑

完成编辑

Return

取消编辑

Esc

移到下一个区域

Tab

移到上一个区域

Shift+Tab

按步长1增加数值

Up

按步长1减少数值

Down

按步长10增加数值

Page Up

按步长10减少数值

Page Down

自动完成下一个关键字

Up

自动完成上一个关键字

Down

Layout标签

编辑值

单击值

Layout编辑

完成编辑

Return

取消编辑

Esc

移到下一个区域

Tab

移到上一个区域

Shift+Tab

按步长1增加数值

Up

按步长1减少数值

Down

按步长10增加数值

Page Up

按步长10减少数值

Page Down

自动完成下一个关键字

Up

自动完成上一个关键字

Down

命令行 (小)

自动完成上一个属性

Tab

自动完成下一个属性

Shift+Tab

执行

Return

Inspect结果

Shift+Return

打开结果鼠标右键菜单

Ctrl+Return

命令行 (大)

执行

Ctrl+Return

13、 总结

真是意想不到，

Firebug居然有那么多好功能居然是我不知道。

通过写本篇文章，

才认真的了解和学习了一次Firebug，

越学越感觉到它的威力。

不过我学的也只是皮毛，

还有更多的功能和技巧需要在平时的使用中慢慢积累，

因此这篇文章只是一个简单的介绍，

还有很多东西是没有涉及到的，

而且因为我本身水平与能力有限，

所以文中会有很多错误与遗漏，

希望大家能多多谅解与指正！

多谢！

例子最终源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug='true'>
<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>
<script language="javascript" type="text/javascript" src="firebug/firebug.js"></script>
</head>
<body scroll="no">
<div id="div1">方块一</div>
<div id="div2" onclick='test()'>方块二</div>
<script>
document.getElementById('div1').innerHTML+='<div id="div3">方块三</div>';
/* console.log('Hello');
console.log(2,4,window,test,document);
console.group('开始分组：');
console.debug('This is console.debug!');
console.info('This is console.info!');
console.warn('This is console.warn!');
console.error('This is console.error!');
console.groupEnd();*/
// console.dir(document.getElementById('div1'));
// console.dirxml(document.getElementById('div1'));

function test(){
console.time('test');
for(var i=0;i<1000;i++){
document.getElementById('div2').innerHTML=i;
//console.log('当前的参数是：%d',i);
}
console.timeEnd('test');
console.trace();
}

</script>
</body>
</html>

以上是firebug怎么用 三全文