进行 HTML、JavaScript 和 Ajax 开发和调试的必用工具

使用最好的开源工具处理 Web 页面、脚本和样式，简化新站点和页面的开发。动态检查和修改 HTML 标记、CSS 和 JavaScript，检查 DOM 以及客户机-服务器通信并了解 bookmarklet 如何让开发变得更为安全和容易。

JavaScript 应用程序变得越来越复杂了 —— 为了在服务器和客户端调试代码，开发人员必须要了解大量的工具和应用程序。而且他们还需要各种工具来检查两者间的通信 —— 往往要涉及标记、脚本、CSS 以及其他构建 Web 站点常用的技术。

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

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

用于 Firefox 的 Web Developer Toolbar，用来动态检查 HTML 代码和修改其部分内容，以及调试 JavaScript

Firebug，用来调试 JavaScript 和 CSS，修改 DOM，以及查看客户机和服务器间的通信
Greasemonkey 与包括 jQuery 的 bookmarklet，用来将开发代码注入实际 Web 站点以测试新特性

如您所见，本文涵盖的内容很多，因此只能对这些工具的功能做简单的介绍。不过，通过本文，您将能够大致了解如何使用这些工具以及这些工具有哪些功能。客户机/服务器间的通信没有在本文中给予介绍，但有可能会在未来一期的文章中涉及到。

参考资料 部分中给出的链接。若想跟随本文的示例学习，应该马上下载。不要忘记重启浏览器以便让所做的更改生效。

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

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

参考资料）针对 Internet Explorer 提供了类似特性。

参考资料）并重启 Firefox 以加载它。从现在开始，您将拥有一个单独的面板，可以通过单击浏览器右下角的小的选定标记激活它。图 3 显示了这个 Firebug 控制台:

参考资料） —— 但它们很难使用而且所提供的特性也不多。在需要重新加载站点和持续单击直至触发了正确的函数时，很多开发人员还是要继续在其代码和开发中使用 alert() 语句。

随着 Firebug 的出现，这一切才有了改观，它具有一个集成的 JavaScript 调试器，能动态提供断点、变量检查和命令执行。是应该超越 alert() 的时候了！

在本文的第 1 节，使用了 Web developer Toolbar 的 Information > View JavaScript 功能，并借此发现 IBM Support Web 站点上的下拉列表调用了 IBMSupportDropdowns.selectChange(this) 函数，而且知道了该函数存在于名为 “ddnav.js” 的脚本内。现在，选择 Firebug 内的 Script 选项卡，从下拉列表中选择 ddnav.js 脚本并导航到 IBMSupportDropDowns.selectChange 函数。通过单击行号设置一个断点。图 6 显示了这个步骤:

参考资料）。jQuery 是一种虽小但却功能强大的库，允许使用 CSS3 语法访问和修改 DOM 。有关 jQuery 的更多细节可以在文章 “Simplify Ajax development with jQuery”（参看 参考资料）中找到。

bookmarklet 则让您可以将 jQuery 注入现有的页面，因此 jQuery 的强大功能可以很容易在 Firebug 控制台内使用。您应该在您的 Google 结果页面上尝试这么做。对页面做 jQuer 处理，然后打开 Firebug 控制台，输入如下代码并执行（只一行代码！）：

$('#sd').append(' > Search at <a href="http://search.yahoo.com/search?p=' + encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>');
 

搜索结果应该类似图 8。

保存此脚本，该链接自动显示在每个 Google 结果页面。现在已经有很多用户脚本存在，让您可以执行各种修改。在 userscripts.org 上可用找到其中一些优秀的用户脚本。

针对 Internet Explorer 也有类似扩展，称为 IE7Pro，正如其名称所暗示的，它只能用于 Internet Explorer 版本 7。但它提供了该浏览器所缺乏的很多特性，比如增强了的选项卡、鼠标动作、广告拦截器以及 “类似 Greasemonkey 的用户脚本”。

有了这两个扩展，就能将小的代码片段应用到任何网站。这对于将所需特性添加到您不能访问其源代码的网站十分有用，如果想要快速在您自己的站点测试（和展示）某些新特性，而又不想触及源代码，这个功能也很有帮助。当然，这仅限于 JavaScript —— 将内容注入实际站点的最终办法是使用代理，这一主题更加高深，同样，亦超出了本文的讨论范围。

 提交到 Digg   发布到 del.icio.us   Slashdot 一下！ 

英文原文 。

Web Developer for Firefox 扩展会将一个带各种 Web 开发工具的工具栏添加到 Firefox，让您可以检查标记和 JavaScript，甚至能够动态进行修改。

Firebug 是面向 JavaScript 开发人员的一个功能强大的 Firefox 扩展；可用来在任何网页实时编辑、调试和监视 CSS、HTML 和 JavaScript。

Internet Explorer Developer Toolbar 允许在 Internet Explorer 7 内监视 DOM。

Greasemonkey for Firefox 扩展面向 Firefox，能在页面加载后，将定制 JavaScript 应用于页面。可以在 userscripts.org 找到这些定制脚本存储库。

IE7Pro 用十分有用的特性扩展了 Internet Explorer 7，亦允许在页面加载后执行定制脚本。还可以找到针对 IE7Pro 用户脚本的 ieScripts 脚本库。

jQuery 是一个小型的 JavaScript 库，让您可以使用 CSS3 选择器访问和修改 DOM。developerWorks 文章 使用 jQuery 简化 Ajax 开发（Jesse Skinner，2007 年 4 月）是有关 jQuery 和 jQuery 扩展的一个很好的介绍性文章。jQuery jQuery Bookmarklet 让您可以对每个页面进行 “jQuery 式” 处理。

developerWorks 文章 真实世界的 Web 2.0: 用 bookmarklets 创建快捷粗略的 Web 应用程序（Uche Ogbuji，2007 年 8 月）提供了 bookmarklet 简介。

developerWorks 文章 掌握 Ajax 系列（Chris Laffra，2006 年 5 月）简单介绍了 AJAX 及相关技术。

面向 Firefox 的 Venkman JavaScript Debugger 旨在为 基于 Gecko 的浏览器 提供一种功能强大的 JavaScript 调试环境。

Microsoft Script Debugger 允许在 Internet explorer 内调试脚本，MSDN IEBlog 的文章 Script Debugging in Internet Explorer 则大致介绍了如何启用 Internet Explorer 内的脚本调试。

需要在 Windows 环境查看通信？ Fiddler2 Tool 可充当本地代理并允许观察和修改所有通信，Wireshark 可以查看网络上的所有流量，而 Microsoft Network Monitor 则可用来查看网络接口上的所有流量。

在 developerWorks Web 开发专区 获得能增强您技能的资源。