2008 年 4 月 02 日

使用最好的开源工具处理 Web 页面、脚本和样式，简化新站点和页面的开发。动态检查和修改 HTML 标记、CSS 和 JavaScript，检查 DOM 以及客户机-服务器通信并了解 bookmarklet 如何让开发变得更为安全和容易。
JavaScript 应用程序变得越来越复杂了 —— 为了在服务器和客户端调试代码，开发人员必须要了解大量的工具和应用程序。而且他们还需要各种工具来检查两者间的通信 —— 往往要涉及标记、脚本、CSS 以及其他构建 Web 站点常用的技术。

本文侧重于开发过程的客户端，展示了一些可简化开发人员工作的 Firefox 工具。这些工具可用来检查页面、更改数据，甚至调试 JavaScript，而且全部都是动态进行的。借助这些工具，无须再在 JavaScript 源代码中使用 alert() 语句，进而实现最为先进的调试、检查和修改。

本文结束后，您应该可以独立使用本文中介绍的 Firefox 扩展和工具并将这些知识应用到您自己的项目中。

内容

在本文中，将使用工具来动态检查页面的 HTML 代码和修改页面的部分内容，进行高级 JavaScript 调试、修改 DOM、查看客户机和服务器间的通信并将开发代码注入实际的 Web 站点来测试这些新特性。

要跟随本文的学习，您将需要如下工具：

用于 Firefox 的 Web Developer Toolbar，用来动态检查 HTML 代码和修改其部分内容，以及调试 JavaScript
Firebug，用来调试 JavaScript 和 CSS，修改 DOM，以及查看客户机和服务器间的通信
Greasemonkey 与包括 jQuery 的 bookmarklet，用来将开发代码注入实际 Web 站点以测试新特性
如您所见，本文涵盖的内容很多，因此只能对这些工具的功能做简单的介绍。不过，通过本文，您将能够大致了解如何使用这些工具以及这些工具有哪些功能。客户机/服务器间的通信没有在本文中给予介绍，但有可能会在未来一期的文章中涉及到。

开始之前

这里介绍的所有工具均可免费得到，您可以从上述链接下载，也可以借助本文末尾的 参考资料 部分中给出的链接。若想跟随本文的示例学习，应该马上下载。不要忘记重启浏览器以便让所做的更改生效。

很多例子都使用了 IBM 支持站点（http://www.ibm.com/support）或 Google 结果页面，所以不妨在新的浏览器窗口打开其中一个，也可以两个都打开。

检查客户端代码

假设您刚开始接触一个新的应用程序，往往想要了解关于它的更多内容 —— 它是如何工作以及如何构建的。这可能是因为您必须要调试或扩展此程序，也可能是因为您想要了解其工作原理以便为自己的项目做一些参考。

“Web Developer Toolbar for Firefox”（参见 参考资料）是一个很棒的 Firefox 扩展，让您可以迅速检查和修改 Web 站点或 Web 应用程序。它可以作为单独的工具栏显示，也可能会出现于上下文菜单。假设您当前正处于 http://www.ibm.com/support/ 站点并想要迅速确定贯穿此站点所使用的那些类和 id。转到 Information > Display ID & Class details，在此文档内可以看到所有的 id 和类。如果您跟随了这些示例进行操作，那么将会看到这可迅速展现诸如 IBM 的左侧导航这类结构。