firedebugger（firebug如何使用以及firebug安装的图文步骤）

大家好，小太来为大家解答以上问题。firedebugger，firebug如何使用以及firebug安装的图文步骤这个很多人还不知道，现在让我们一起来看看吧！

Firebug是网页浏览器Mozillafirefox下的开发插件，现在是firefox的五星强烈推荐插件之一。它集成了HTML查看和编辑、JavaScript控制台和网络状态监视器，是开发Javascript、CSS、HTML和Ajax的强大助手。Firebug就像一把精致的瑞士军刀，从不同的角度分析网页的内部细节，给Web开发者带来了极大的便利。

对于web开发者来说，Firebug是火狐浏览器中最好的插件之一。也可以说Firebug的CSS调试器是专门为网页设计师量身定做的！

一、firebug怎么安装？

1.首先下载火狐浏览器，点击下载。

2.找到“工具(T)”并从下拉列表中选择“附件”。

3."获取附加组件"

4.在搜索中输入“firebug”，只需等待。

5.安装firebug插件，安装完成后的图标如图所示：

6.检查页面元素并修改页面。

二、firebug怎么用？

一、安装Firebug

Firebug运行在Firefox浏览器中。还有另一个版本的Firebuglite，可以通过javascript调用并包含在页面中，以便在其他非Firefox浏览器中使用。本文不涉及这个版本。

要安装Firebug，请访问Firebug下载页面。单击本页右栏中间的巨大橙色按钮。你也可以从Mozilla的FireFox附加组件网站下载。安装完成后，只要重启FireFox就可以使用了。

如果您已经安装了它，请检查它是否更新到最新版本。打开Firefox的“工具”菜单，选择“加载项”命令，然后单击弹出窗口左下角的“查找更新”按钮。

三、二、打开和关闭Firebug

在Firebug的网站上，可以找到它的快捷键设置。我最常使用以下三种方法：

*打开Firebug:按F12，或者点击浏览器状态栏右侧的绿色标志。

*关闭Firebug:按F12，或者点击浏览器状态栏右侧的绿色标志，或者点击Firebug窗口右上角的红色关闭标志。

*在单独的窗口中打开firebug:单击Firebug窗口右上角的红色箭头标志，或者使用CtrlF12/#8984；F12按钮。

与Firebug相关的设置：

*修复firebug在新窗口打开：首先打开Firebug，点击左上角的bug标志，在选项菜单中选择‘总是在新窗口打开’设置。

*增大/减小字体大小：首先打开firebug，点击左上角的bug标志，选择‘文本大小’命令。每次字体变化很小，可能需要多次使用。

*将Firebug的使用仅限于某些网站：首先右键单击浏览器状态上的绿色复选标记，然后选择“禁用Firebug”命令。然后，右键单击灰显的徽标并选择命令“允许的站点.”。添加允许Firebug生效的域名。

四、三、Firebug窗口概览

*控制台页签：主要使用javascript命令行操作，显示javascript错误信息。在底部的提示之后，您可以自己键入javascript命令。

*HTML标记：显示HTML源代码，和DOM层次结构一样，每一行都在它之前缩进。您可以选择显示或不显示子节点。

*CSS标签:浏览所有加载的样式表，当场修改。在Firebug窗口的顶部，在“编辑”命令的旁边，有一个这个页面中所有样式表的下拉列表。您可以选择一个样式表来浏览。

*Script标记：显示javascript文件及其页面。在Firebug窗口的顶部，“inspect”命令旁边，有一个下拉列表，列出了该页面中的所有Javascript文件。你可以选择一个来浏览。您可以在javascript命令中设置断点及其条件。

*DOM标签:显示所有页面对象和窗口对象的属性。因为在javascript中，所有变量都是窗口对象的属性，Firebug会显示所有变量及其值。

*N

五、四、随时编辑页面

在HTML标签中，点击窗口上方的"inspect"命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。

Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中的对象，都可以用单击或双击进行编辑。当你输入完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上部"inspect"命令旁边的"edit"命令，下方的窗口就会立刻变成一个黑白的文本编辑窗口，你可以对HTML源代码进行任意编辑。在CSS标签中，Firebug会自动补全你的输入。在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。

六、五、用Firebug处理CSS

在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。你可以双击对这些设置进行编辑。

对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的CSS3规则。所以，它会隐藏_height:25px;（下划线是一个针对IE6的设置）和p:first-of-type{color:#ff0000;}(:first-of-type是一个CSS3规定的伪类，目前只有Safari3支持）。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法显示，那么你只有使用其他编辑器显示全部CSS内容，找到你的错误。

Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。"关闭"一条语句的方法是，在该语句的左边点击，会出现一个红色的禁止标志。该语句就会变灰。再次点击，该语句就会恢复。

Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。

Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector，然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。

六、盒状模型

当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个layout按钮，点击后会展示与该元素相关的方块模型，包括padding、margin和border的值。要查看每一个元素的这三项值，只需点击"inspect"按钮，然后用鼠标悬停在页面中该元素的上方。

七、评估下载速度

Net标签中图形化了页面中所有http请求所用的时间。使用这个功能，必须打开Networkmonitoring，默认设置就是打开，但是你可以在"options"下拉菜单中关闭这个选项。你可以用这项功能评估javascript文件下载，占用整个页面显示的时间。

在每个HTTP请求的左面点击，会显示该次请求的头信息。

在1.0.5版以后，你可以单独查看HTML文件、CSS文件、图像文件等各自下载的时间。

八、DOM

DOM标签提供页面上所有物体的所有属性的信息。Firebug最酷的功能之一是，它可以动态修改页面，反映在浏览器窗口，但是如果使用浏览器自带的查看源码功能，你会发现源码并没有改变。

七、九、Javascript调试

JavaScriptprofiler可以报告你的Javascript函数执行所花的时间，因此你可以查看不同函数对速度的影响。使用这个功能的方法是，打开console标签，然后点击上面的Profile按钮（上部的按钮顺序是"Inspect|Clear|Profile"）。Firebug列出调用的所有函数，及其所花的时间。你可以针对要测试的某个函数，在其前部加上console.profile([title])，在其后部加上console.profileEnd()。

console标签的底部是命令行输入，它以">>>"开头。如果命令行输入有结果输出，那么它会展示在上部的窗口。有一个详细的命令行输入API值得看一下。Firebug内置console对象有几种有用的方法可供调用，包括console.debug、console.info、console.warning、console.error等。如果这些方法产生了输出结果，Firebug会提供一个链接，让你查看相应的代码。

调试的另一个方法是设置断点。Script标签允许你在任意行暂停执行。单击行号，就会设置一个断点。右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。右面还有一个watch窗口，可以查看当前变量的值。

十、AJAX

前面已经提到，Firebug可以捕捉页面的动态内容和其他DOM变化。如果你打开这个示例文件，点击页面上的链接后，在浏览器中查看源码，你会发现什么也没有改变，源码中依然包含那个链接。但是，如果你在Firebug中查看源码，你会发现DOM已经发生了变化，"HelloWorld"已经被包括在内了。这就是Firebug的核心功能之一，没有它，AJAX的请求和回应就是不可见的。有了它，你可以看到送出的和收到的文本，已经相应的头信息。在Net标签中，你还能监控每个请求/回应各自所花费的时间。

Net标签中的XHR功能，对查看AJAX操作特别有用。如果你点击每个服务器端回应前的加号，你就会看到服务器端回应的头信息和内容。

当通过XMLHttpRequest对象向服务器端发出一个请求时，Firebug会记录请求的POST或GET内容，以及回应的头信息和内容。使用Net标签中的XHR功能，就可以看到这些内容。它会列出所有服务器的回应，以及所花费的时间。点击前面的+号，如果是GET请求，会显示三个标签；如果是POST请求，会显示4个标签:

Params:显示请求URL中所包含的name/value对。

Headers:显示请求和回应的头信息。

Response:显示实际从服务器收到的信息。

Post：显示从通过POST请求，送到服务器的信息。（此项GET请求不包括。）

这四个标签对编写和调试程序很有用。检查POST和Params标签，确定你的请求被正确地发出了。检查Response标签查看返回的格式，确定相应的Javascript处理函数应该如何编写。

本文到此结束，希望对大家有所帮助。

标签：

免责声明：免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！