【FireBug插件下载】FireBug整合版 v2020 官方中文版

King 8月 14, 2023 0

软件介绍

Firebug插件是一款可以应用于firefox浏览器下的网页调试工具，能够调试诸如Html、Css等所有网站语言，支持html、css、dom的查看与调试，网站整体分析等等，让用户只需打开浏览器就能完成编程开发。除此之外还具备javascript调试等其他实用功能。

FireBug插件下载截图

FireBug软件特色

激活

Firebug的激活是基于URL的，遵守相同的来源策略。这意味着，当您在不同的选项卡上打开同一个来源的页面时，Firebug会自动打开。当您在同一选项卡中打开不同来源的页面时，它会自动关闭。另一方面DevTools的激活是基于标签的。这意味着，当您在选项卡中打开DevTools时，即使您在不同网站之间切换，它们也会保持打开状态。当你切换到另一个标签，但是，他们被关闭。

打开工具

按F12可打开Firebug。要打开它来检查元素，可以按Ctrl+ Shift+ C/ Cmd+ Opt+ C。DevTools共享相同的快捷键，但也分享了不同面板的快捷键。例如，网络监视器可以通过Ctrl+ Shift+ Q/ Cmd+ Opt+ 打开Q，Web控制台通过Ctrl+ Shift+ K/ Cmd+ Opt+ K打开，调试器通过Ctrl+ Shift+ S/ Cmd+ Opt+ 打开S。

该Web控制台是Firebug的相当于控制台面板。它显示与网页相关的日志信息，并允许您通过命令行执行JavaScript表达式。两者之间的显示有所不同。这可能会改变错误1269730。

过滤日志消息

Firebug分享了两种方法来过滤日志消息，通过选项菜单和工具栏中的过滤器按钮。开发者工具控制台通过其工具栏内的过滤器按钮分享类似的功能- 集中在一个地方。

命令行API

Firebug中的命令行API分享了一些特殊功能，以方便您使用。开发工具命令行有一些共同的功能，但也有一些其他的功能，错过了别人。

控制台API

从网页内将东西记录到控制台Firebug 在页面中分享了一个控制台API。开发者工具共享相同的API，所以你的console.*语句将继续工作。

坚持日志

在Firebug中，您可以单击工具栏中的Persist按钮以保留页面导航和重新加载之间记录的消息。在DevTools中，这个选项被称为启用日志，并且在“工具箱选项”面板中可用。

服务器日志

像FirePHP这样的Firebug扩展允许将服务器端消息记录到Firebug控制台。该功能已经使用ChromeLogger协议集成到DevTools中，不需要安装任何扩展。

命令历史

该命令历史记录可通过在Firebug的命令行按钮，可以按↑/↓在DevTools命令行中。

FireBug软件功能

CSS调试

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

如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。

一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。

如图4中正在修改一个区块的背景色。

提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。

CSS尺标

我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标

尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够分享有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。

网络监视器

也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。

网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

JS调试器

这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不

少。正所谓麻雀虽小，五脏俱全。

如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步的来排除问题。

Console 控制台

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身分享的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

像C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：

console.log(“hello world”)如果你有一堆参数需要组合在一起输出，可以写成这样：

console.log(2,4,6,8,”foo”,bar). Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有助于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。

修改HTML

第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。 HTML

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，

它清楚地列出了一个html元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。

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

利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。

DOM查看器

DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无

所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。