用Firebug动态调试和优化应用程序

为何您的 Web 页面要花这么长时间才能加载？您是否也想在浏览的同时检查或编辑 HTML？想马上调试 CSS？在本文中，了解如何使用 Firefox 浏览器的免费开源扩展 Firebug，它提供了很多有用的开发特性和工具。 可以使用 Firebug 监视、编辑和调试活动 Web 页面，包括 HTML、CSS、Javascript 代码和网络流量。此外，学习如何使用 Firebug 加快 Web 和 Ajax 应用程序的调试和优化。

简介

Firebug 是 Mozilla Firefox 浏览器的开源扩展，提供了很多工具，可以监视、编辑和调试任何 Web 站点的级联样式表（CSS）、HTML、文档对象模型（DOM）和 Javascript。Firebug 包括一个 Javascript 控制台、一个日志记录 API 以及一种有用的网络监视器。借助 Firebug，可以很轻松地调试和优化 Web 和 Ajax 应用程序。

Firebug 也有针对 Internet Explorer、Opera 和 Safari 的 Firebug Lite 版本。

本文将帮助您熟悉所如下的 Firebug 特性：

• 编辑活动 Web 页面的 HTML、CSS 和 Javascript
• 调试和剖析报告
• 进行日志记录以测试执行时间
• 使用 Network Monitor 分析 Web 页面的加载时间
• 错误报告

回页首

立即开始

developerWorks Ajax 资源中心 查看 Ajax 资源中心，这里几乎囊括了关于 Ajax 编程模型的所有信息，包括各种文章、教程、论坛、blog、wiki、活动和新闻。

使用 Firefox，下载 Firebug。通过单击页面右侧的橙色按钮 Install Firebug 安装此扩展。

Firefox 安装了此扩展后，重启浏览器。要使用 Firebug：

1. 转到任何一个 Web 页面并按 F12 在浏览器窗口打开 Firebug。
2. 按 CTRL-F12 在另一个窗口打开 Firebug（如果有两个监视器，这是一个很好的特性）。

   本文使用了第一种方法在相同的浏览器窗口中打开 Firebug，如图 1 所示：

图 1. 安装后的 Firebug

安装后，Firebug 是禁用的。单击 Enable Firebug 启用它，如图 2 所示：

图 2. Firebug 显示了 developerWorks 的首页

本文的后面的内容将讨论 Firebug 的特性。

回页首

HTML 和 CSS 工具

HTML 和 CSS 工具包括：HTML 检查和编辑、CSS 编辑和 CSS 可视化。

检查和编辑 HTML

可以使用 HTML 检查特性在源代码中定位可视 HTML。

1. 在 Firebug 窗口，单击 Inspect。
2. 将鼠标移到任何一个 HTML 组件之上。这样就可以在 Firebug 窗口上看到该 HTML 元素（被蓝色方框围绕）和 HTML 源代码。如图 3 的示例：
   
   图 3. 在 Firebug 检查 HTML
   
   
3. 单击选中的 HTML 元素。有趣的是这会使此次检查“锁定”到所选定的元素。
4. 可以转到 Firebug 窗口并单击 Edit 编辑选定的元素。

   图 4 给出了 Firebug 编辑窗口以及浏览器窗口中已编辑的文本。“Editing with Firebug” 已经代替了原先的 Ajax 标题。

   
   
   图 4. 编辑 HTML
   
   

在检查元素时，将会看到 Firebug 窗口内的元素嵌套，如图 5 所示：

图 5. 元素嵌套

编辑 CSS

还可以通过检查这个 Web 页面进行 CSS 编辑。Inspection 视图会显示相关的 CSS 条目，包括继承样式。如图 6 的示例：

图 6. CSS 检查

CSS 工具还可用来编辑 CSS 即时属性、禁用属性、自动完成和图片预览，如图 7 所示：

图 7. CSS 图片预览

CSS 的可视化

CSS 的可视化在检查 HTML（回顾 图 3 中的蓝色边框）已经展示过了。Firebug Layout 选项卡显示了更多的信息，比如间隙、 偏移和其他相关的量度。图 8 中的布局窗口则显示了一个导航元素的量度：

图 8. CSS 盒的量度

图 9 展示了能即时编辑 CSS 盒的奇妙的 Firebug 特性：

图 9. CSS 盒编辑

回页首

Javascript 工具

现在，Javascript 工具是 Web 开发中最有用的工具之一。Firebug 提供了调试、剖析、日志记录和命令行控制台特性。

调试和剖析

Firebug Javascript 工具包括断点、监视表达式和典型调试器中常见的其他一些工具。图 10 展示了断点和逐步调试的实际例子。请注意作为工具提示的主机变量的值。

图 10. Javascript 调试器

有用的调试工具能：

• 直接导航到 Javascript 中的特定行
• 监视表达式（可以是任意的 Javascript 表达式）
• 以可视格式调用堆栈
• 条件断点
• 错误后进行调试的能力

Javascript 剖析非常有用。如 Firebug 中的其他特性一样，剖析也很容易使用。单击 Console 选项卡上的 Profile 启动剖析器，如图 11 所示：

图 11. 启动 Javascript 剖析器

剖析开始后，可以浏览一下此站点。单击 Profile 获得剖析报告，如图 12 所示：

图 12. Javascript 剖析器报告

该报告显示了花在函数上的时间和平均时间等等。

Javascript 日志记录

对于更愿意使用老的日志记录（而非调试）方式的开发人员，Firebug 提供了日志记录功能。日志记录使用的是一种 Firebug Javascript API。最简单的一种日志条目是 console.log("logging");。

Console API 包含其他一些功能，如清单 1 所示：

清单 1. Firebug Console API 示例

                
console.time("test timer");
console.log("Hello from ",document.title);
console.info("This is info");
console.warn("This is warning");
console.error("This is error");
console.timeEnd("test timer");
      

可以使用 console.time 和 console.timeEnd 来测量执行时间。在详细报告中显示结果的 console.profile() 和 console.profileEnd() （见清单 1）也可用来测量执行时间。

图 13 显示了这些结果。Javascript 控制台日志测试功能被添加到由 Web 服务器提供服务的页面中。

图 13. Console 日志

Console API 内其他有用的特性还有堆栈跟踪、对象检查和字符串格式化。

Javascript 命令行

Firebug 最为强大特性之一就是 Javascript 命令行。这种命令行的使用方式与其他命令行一样；它执行您编写的所有 Javascript 代码，好像它们就是页面的一部分一样。通过命令行，可以检查 DOM、获得属性等等。所有返回值都显示在控制台上。

命令行具有自动完成功能（使用 Tab 键）以及完善的文本编辑器（能够编写完整的函数而不仅仅是几行代码）等等。图 14 给出了一个简单的控制台会话。请注意 Web 页面左上角的徽标。这里也可以进行即时编辑。

图 14. 命令行 Javascript

与控制台类似，命令行也有一个 API，它包含可用于 Firebug 的特殊函数，比如 $(id)。该函数能够返回带有给定 id 的元素。

回页首

网络监控

Firebug Network Monitor 特性可用来监视加载 Web 页面所花费的时间。使用 Net 选项卡可以看到进度栏，该进度栏显示了一个文件相对所有其他文件开始和停止加载的时间。Network Monitor 分开每个文件的流量，因此就可以查看加载图像、Javascript、HTML 等各占用了多少时间。此外，还可以查看资源是否从浏览器缓存中加载。

对于本例中的 Ajax 开发，Firebug 在 Net 选项卡和 Console 选项卡中均显示了每个 XMLHttpRequest。

图 15 显示了如何利用 Network Monitor 查看 HTTP 请求和响应头。要查看 HTTP 头，只需单击每个请求左侧的箭头将其展开。全部请求、已用时间和内容的大小均显示在 Firebug 窗口底部。

图 15. Network Monitor

回页首

其他特性

Firebug 的其他特性包括：

错误报告

一旦错误发生，Firebug 能够提供有用的：

• 状态栏指示器
• 行号、文件和堆栈跟踪
• 调试器集成
• 搜索和过滤器

Firebug 还会显示只与所查看的页面相关的错误。

DOM

Document Object Model 是 Web 页面中的对象和函数的等级结构。Firebug DOM 包括所有定制的和标准的对象，而且 DOM explorer 能够分辨它们。这里同样可以进行 Javascript 代码导航、自动完成和即时编辑。

定制

Firebug 定制特性包括黑名单和白名单以及依据个人需要更改字体大小的功能。

回页首

结束语

Firebug 是 Web 开发人员必备的工具。它使测试和调试会话变得更加简单。Firebug 还是一个优化 CSS 样式和 Web 页面外观的优秀工具。

参考资料

学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文 。
  
• “Ajax 性能分析”（developerWorks，2008 年 5 月 19 日）：讨论如何使用 Firefox 的 Firebug 扩展和 YSlow 插件分析 Web 应用程序。
  
• 阅读以了解针对 Internet Explorer、Opera 和 Safari 的 Firebug Lite。
  
• 浏览 技术书店 获得关于本文的主题以及其他主题的书籍。
  

获得产品和技术

• 下载 Firefox ，来自 Mozilla 的获奖 Web 浏览器。
  
• 下载针对 Firefox 的 Firebug，以获得大量有用的 Web 开发工具。

讨论

• 参与 developerWorks blogs 并加入 developerWorks 社区。