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

偏执的太偏执、 2021-11-01 14:36 302阅读 0赞

简介

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

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

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

立即开始

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

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

1.  转到任何一个 Web 页面并按 **F12** 在浏览器窗口打开 Firebug。
2.  按 **CTRL-F12** 在另一个窗口打开 Firebug（如果有两个监视器，这是一个很好的特性）。
    
    本文使用了第一种方法在相同的浏览器窗口中打开 Firebug，如图 1 所示：

**图 1. 安装后的 Firebug**  
![安装后的 Firebug][Firebug 1]

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

**图 2. Firebug 显示了 developerWorks 的首页**  
![Firebug 显示了 developerWorks 的首页][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**  
    ![在 Firebug 检查 HTML][Firebug _ HTML]  
      
    
3.  单击选中的 HTML 元素。有趣的是这会使此次检查“锁定”到所选定的元素。
4.  可以转到 Firebug 窗口并单击 **Edit** 编辑选定的元素。
    
    图 4 给出了 Firebug 编辑窗口以及浏览器窗口中已编辑的文本。“Editing with Firebug” 已经代替了原先的 Ajax 标题。
    
      
      
    **图 4. 编辑 HTML**  
    ![编辑 HTML][HTML]

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

**图 5. 元素嵌套**  
![元素嵌套][firebug5.jpg]

**编辑 CSS**

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

**图 6. CSS 检查**  
![CSS 检查][CSS]

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

**图 7. CSS 图片预览**  
![CSS 图片预览][CSS 1]

**CSS 的可视化**

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

**图 8. CSS 盒的量度**  
![CSS 盒的量度][CSS 2]

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

**图 9. CSS 盒编辑**  
![CSS 盒编辑][CSS 3]

JavaScript 工具

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

**调试和剖析**

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

**图 10. JavaScript 调试器**  
![JavaScript 调试器][JavaScript]

有用的调试工具能：

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

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

**图 11. 启动 JavaScript 剖析器**  
![JavaScript 剖析器][JavaScript 1]

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

**图 12. JavaScript 剖析器报告**  
![JavaScript 剖析器报告][JavaScript 2]

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

**JavaScript 日志记录**

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

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

**清单 1. Firebug Console API 示例**

<table> 
 <tbody> 
  <tr> 
   <td><pre>            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");
            </pre></td> 
  </tr> 
 </tbody> 
</table>

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

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

**图 13. Console 日志**  
![Console 日志][Console]

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

**JavaScript 命令行**

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

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

**图 14. 命令行 JavaScript**  
![命令行 JavaScript][JavaScript 3]

与控制台类似，命令行也有一个 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**  
![Network Monitor][]

其他特性

Firebug 的其他特性包括：

**错误报告**

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

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

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

**DOM**

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

**定制**

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

转载于:https://www.cnblogs.com/opaljc/archive/2012/09/13/2682786.html

[Firebug]: http://www.getfirebug.com/
[Firebug 1]: /images/20211101/9af94b5fbbf641fcaf4a7f8674e45ba8.png
[Firebug _ developerWorks]: /images/20211101/7ac40ce3d3d246b2b87f1309ff884b10.png
[Firebug _ HTML]: /images/20211101/b6deb9838ec640809d10542c70375f6e.png
[HTML]: /images/20211101/fdcc53d593c742feb8d6961be55765d1.png
[firebug5.jpg]: /images/20211101/81f0294a4418448a8c9ab7aa79737192.png
[CSS]: /images/20211101/015b192b58524ccba925ab1204c1b8e5.png
[CSS 1]: /images/20211101/ef6be362bfb34ee5bd32ca15bf75bb59.png
[3]: http://www.ibm.com/developerworks/cn/web/wa-aj-firebug/#fig3
[CSS 2]: /images/20211101/009c225bb7c843a7b6892136247f8adf.png
[CSS 3]: /images/20211101/a589aa6cc48d4b9cbdd4c17072a3d070.png
[JavaScript]: /images/20211101/5cb01f209e714c9cab19c68064cdd219.png
[JavaScript 1]: /images/20211101/484fba29e5154c46bca73ac5e62aaed3.png
[JavaScript 2]: /images/20211101/e0f8c015050c4a1da768136758a37567.png
[Console]: /images/20211101/7a30c9dcef5749afb67ca4f5b1c5828c.png
[JavaScript 3]: /images/20211101/8073b1d1fdb24ca7a33218e470bcd757.png
[Network Monitor]: /images/20211101/5fd91fe005d942ecbebff197ef9b364e.png