用 Firebug 动态调试和优化应用程序（3）JavaScript 工具

look_w

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 示例

1 2 3 4 5 6

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 的元素。