让人爱不释手的WEB开发工具——Firebug.0

什么是萤火虫

从事web开发几年了，越来越觉得自己现在对web开发的要求更高了。编写漂亮的HTML代码；编写精美的CSS样式表来展示各个页面模块；调试以在页面中添加一些更活泼的元素；使用 Ajax 带来更好的用户体验。一个优秀的WEB开发者需要考虑更多方面，才能交出一份同样出色的工作。为了帮助Web2.0洪流中的开发者，这里为大家提供一个轻量级灵活的辅助开发工具。

Firebug 是 Firefox 下的开发插件，现在是 Firefox 强烈推荐的五星级插件之一。它集成了 HTML 查看和编辑、Javascript 控制台和网络状态监视器。它是开发JavaScript，CSS，HTML和Ajax的强大助手。 Firebug 就像一把精致的瑞士，从不同的角度分析网页的内部细节，给网页开发者带来极大的便利。这是一款让人爱不释手的插件。如果您之前没有接触过它，那么您可能想在阅读本文后尝试一下。作者在写这篇文章的时候，恰逢Firebug发布1.0正式版，不能不说是巧合。

申请

Firebug 插件虽然功能强大，但已经与 Firefox 浏览器无缝集成，使用起来简单直观。如果您担心它会占用太多系统资源，您也可以轻松启用/禁用此插件，甚至可以为特定站点启用此插件。

插件安装好后，先用Firefox打开待测页面，然后点击右下角绿色按钮或使用快捷键F12调出Firebug插件。它将当前页面分为上下两个框架，如图1所示。

图 1：Firebug 插件扩展图标

从图1中可以看到，Firebug有6个主要的Tab按钮。下面主要介绍这几个方面的作用。

控制台

HTML

CSS

脚本

Dom

网络

控制面板

HTML 查看器

CSS 查看器

脚本剥离期

Dom 查看器

网络状态监控

控制台控制台

控制台可以显示当前页面的javascript错误和警告，并提示错误的文件和行号，方便调试。这些错误提示比浏览器本身提供的错误提示更详细，更有参考价值。它在调试 Ajax 应用程序时特别有用。您可以在控制台中看到每个 XMLHttpRequests 请求帖子的参数、URL、http 头和反馈内容。原本看似在幕后黑匣子里运行的程序，大家都看得一清二楚。展现在你面前。

和C shell或者Python shell一样，你也可以在控制台查看变量的内容，直接运行javascript语句。即使是很大一部分 javascript 程序也可以正确运行并获取运行时信息。

控制台的一个重要功能是查看脚本的日志。以前大家可能习惯用alert来打印变量，但是Firebug给我们带来了一个新朋友-console.log，最简单的打印日志的方式。语法是这样的：

console.log("hello world")

如果你有一堆参数需要组合输出，可以这样写：

console.log(2,4,6,8,"foo",bar).

Firebug 的日志输出有多种可选格式和语法，甚至可以自定义颜色输出。比起单调的alert，显然方便多了。限于篇幅，这里就不展开了，有兴趣提高调试效率的读者，可以到Firebug官网（见附录）查看更详细的教程。

图 2：在控制台中调试 javascript

查看和修改 HTML

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

您首先看到的是格式化的 HTML 代码。它有明确的层次。您可以轻松区分每个标签之间的从属关系和平行关系。标签折叠功能可以帮助您专注于分析代码。 。 DOM 级别也标记在源代码的顶部。如图 3 所示，它清楚地列出了 hml 元素的父元素、子元素和根元素。当与 Firebug 的内置 CSS 查看器一起使用时，它会给出一个 div+css 页面。分析和写作带来很大的好处。也可以直接在HTML查看器中修改HTML源代码，在浏览器中第一时间看到修改后的效果。仅此一项，就会让很多页面设计者拼命地成为 Firebug 的粉丝。

有时页面中的javascript会根据用户的鼠标悬停等操作动态改变一些HTML元素的样式表或背景颜色。 HTML 查看器还将捕获页面上更改的内容并以突出显示。标记使网页的黑匣子操作完全成为历史。

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

图 3：HTML 查看器

CSS 调试

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

今天的网页设计语言一定叫div+css。如果你使用的是表格设置的HTML页面，你必须按照这个规则重新重构，否则看起来你不够时尚！用 div 制作的页面确实可以简化 HTML 代码。由于HTML标签的减重，CSS样式表的编译成为页面制作的重头戏。 Firebug 的 CSS 查看器不仅从下到上列出了每个 CSS 样式表的从属继承关系，还列出了每个样式定义在哪个样式文件中。您可以在该查看器中直接添加、修改和删除一些CSS样式表属性，并在当前页面直接查看修改后的结果。

一个典型的应用是页面上一个块的位置有点不合适，需要移动几个像素。这时候就可以用CSS调试工具轻松编辑它的位置了——你可以随心所欲地移动像素。

如图4所示，正在修改块的背景色。

提示：如果你正在学习CSS样式表的应用，但是不记得常用样式表的值，可以尝试在CSS调试器中选择一个样式表属性，然后使用上下方向键改变它的值，它会一一显示可能的值。

图4：CSS查看器，可以直接修改样式表

可视化 CSS 标尺

我们可以使用 Firebug 来查看页面某个部分的 CSS 样式表。如果将右侧的Layout选项卡进一步展开，它会以标尺的形式清楚地标识当前节所占据的区域，准确到点，更让人惊喜的是，你可以直接修改其中的每个像素的值这个可视化界面，块在页面上的位置也会随着变化而变化。当页面上的某些元素错位或面积超过预期值时，该功能可以提供有效的帮助。你可以用这个来分析offset、margin、padding、size之间的关系，找到解决问题的办法。

图 5：Firebug 中的 CSS 标尺

网络状态监控

也许有一天，您的老板或客户找到您并抱怨您的网页速度太慢。你应该如何处理？你可能会说这可能是网络问题，或者电脑配置问题，或者程序太慢，或者说是字符问题？不管怎样，最后可能会要求你解决这么多可能的问题。

网络状态监视器可以帮助您解决此难题。 Firebug 的网络监视器也很强大。它可以将CSS、javascript和网页中引用的图片所消耗的时间显示为矩阵图。也许你可以在这里找到慢。如果你找到了你的网页的罪魁祸首，你可以优化网页。最后，老板满意了客户的喜悦，你的工作也得到了加强。

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

图 6：网络状态监视器

Javascript 调试器

这是一个非常好的javascript脚本调试器，不占空间，但是单步调试，设置断点，变量查看窗口很多。所谓麻雀虽小，五脏俱全。

如果您已经建立了一个网站，但是它的javascript有性能问题或不够完美，则可以使用面板上的Profile来计算每个脚本的运行时间，以查看哪些语句执行所需的时间太长逐步解决问题。

图 7：JavaScript 调试器

DOM 查看器

DOM（文档对象模型）包含大量的对象、函数和事件。在过去，要从中找到您需要的东西并不容易。这就像去一个巨大的图书馆，想着找几本名字不准确的小书，众多的选择会让你不知所措。使用 Firebug 的 DOM 查看器可以轻松浏览 DOM 的内部结构，帮助您快速定位 DOM 对象。双击 DOM 对象以编辑其变量或值。在编辑时，您可能会发现它具有自动完成功能。输入document.get后，按tab键完成document.getElementById，非常方便。如果觉得完成度不够理想，可以按shift+tab恢复原状。使用 Firebug 的 DOM 查看器，您的 javascript 已找到驱动对象，Web 开发可能会成为一种乐趣。

图 8：Dom 查看器

总结

Firebug 插件提供了一整套 Web 开发所需的工具。从 HTML 的编写，到 CSS 样式表的美化和调整，再到 JavaScript 脚本或 Ajax 应用程序的开发，Firebug 插件都将是您的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，一定叫Ajax，动不动就提升用户体验。如果你用好Firebug工具，你一定会更强大。您将能够将HTML，CSS和javascript组织到一个引人入胜的帖子中，这将成为Web开发。专家级数字。

附上

Firebug的中文意思是“萤火虫”，作者是官方网站Joe Hewitt

火狐浏览器，又称火狐浏览器，是近年来撼动IE浏览器市场份额的强大力量。如果它没有出现，我这辈子都不会看到 IE 7 的发布。官方网站

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-378938-1.html