2008 年 4 月 02 日

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

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

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

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

内容

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

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

• 用于 Firefox 的 Web DeveloperToolbar，用来动态检查 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 的左侧导航这类结构。

图 1. IBM 的左侧导航结构，包括 id 和类的细节

此外，还有其他的一些很棒的 outline 特性可用。比如，可以 outline 所有的表（无一在 ibm.com 上！）或所有块级别的元素。这样一来，就可以很容易地看到 div 元素是如何在屏幕上布局的 —— 在开发新站点时，这是一个很好的工具。

但，还远远不止这些 —— 尤其是对于测试而言。您可以很轻松地禁用 JavaScript、cookie 或样式以检查站点是否还能工作，或者它对屏幕阅读器应用程序或搜索引擎又作何显示。禁用图像和显示所有 alt 标记可以很快显露可用性问题，也可以提供有关页面上所用图像的大量信息。

另一个重要特性，尤其是测试应用程序安全性所需的，是工具栏的 Forms 部分。在这里，不仅可以插入表单，还可以尝试 JavaScript 验证，方法可以是让表单字段成为可写的，或是删除文本字段的最大长度，也可以将选择 下拉列表更改为文本输入字段。这样一来，测试数据修改后应用程序是否还能工作就显得异常简单，无须修改任何源代码。转到 Forms > Convert Form Methods > GETs to POSTs 以修改位于 ibm.com 顶部的 Search 表单的行为。图 2 显示了此步骤：

图 2. Search 表单的细节

如果现在输入一个搜索词并按 Search 按钮，您不会得到结果列表，反而会被重定向到帮助页面。而这正是 ibm.com 搜索引擎的理想行为。

Web Developer Toolbar 的另外两个重要特性是能使用一种非常简单的界面查看和编辑 cookie 信息（Cookies> View Cookie Information）以及查看页面上所使用的所有 JavaScript（Information >View Java）。最后的这个特性既包括内联（inline）脚本也包括动态加载的脚本，所以搜索会在这两个地方找到结果。

在继续学习之前，不妨花些时间了解一下 WebDevelopment Toolbar 提供的所有特性，您将来很快就会发现缺少它，工作很难开展。Internet Explorer Developer Toolbar（参见 参考资料）针对 Internet Explorer 提供了类似特性。

探索 DOM

探索了静态页面之后，就可以利用 JavaScript 开发人员所能使用的一种最为强大的扩展处理一些动态内容了。如果您还不曾使用过它，现在就可以立即安装 Firebug扩展（参见 参考资料）并重启 Firefox 以加载它。从现在开始，您将拥有一个单独的面板，可以通过单击浏览器右下角的小的选定标记激活它。图 3 显示了这个 Firebug 控制台:

图 3. Firebug 控制台

此控制台需要占用很多内存空间，所以只有在需要的时候才能为某些网站启用。它也能针对特定的主机启用 —— 在需要在某台测试机器上开发代码并要在此机器上进行调试时，借助 Firebug 就显得非常必要。

一旦激活，不同的 Firebug 特性就会在顶部列出 —— 目前而言，只侧重于 HTML 选项。它以一种易读的格式显示了页面的 HTML 源代码。可以层叠和扩展不同的部分并使用强大的 Inspect 按钮来浏览此DOM。请注意所显示的 DOM 是应用了所有动态更改的站点的当前 DOM，注意到这一点很重要。如果脚本删除了一个元素，该元素也会从 Firebug 视图删除。

使用 Inspect 特性来选择 IBM Support 页面（http://www.ibm.com/support/）上的 Choose supporttype 下拉列表。一旦元素被选中，DOM 视图就会更新并显示选中文件的 HTML 代码。如果在不同的元素上单击并编辑它们，这些更改就立即会在 DOM 和所呈现的视图上生效。继续并向 onchange 事件处理程序添加 alert() 语句，如图 4 所示:

图 4. 使用 Firebug 添加定制代码

单击 Enter 以保存更改，并选择下拉列表中的其他项。瞧，消息出现了。请注意更改并不会永久保存 —— 一旦页面重载，更改就失效了。此特性对于快速测试更改或修改 DOM 以测试脚本的功能性尤其有用（这将在下一章节进行进一步讨论）。

您可能会注意到应用于选定元素的所有 CSS 样式均在 Firebug 面板的右侧显示为蓝色。这对于通过脚本进行动态更改以及 CSS调试（比如为了寻找一个间隔问题）尤其有用。Layout 选项卡给出了元素的间隔和边界的概览，而 DOM 选项卡则对 JavaScript开发有帮助，因为它会列出所选定元素的所有 DOM 属性。

无须多言的是，Firebug 既能修改 CSS 样式，又能修改 DOM 属性，而且这些更改还会立即生效。图 5 显示了 Firebug 的 CSS 检查控制台:

图 5. Firebug 的 CSS 检查控制台

调试 JavaScript

很长一段时间，JavaScript 都未能获得其应有的荣誉。很多人都将其视为一种 “玩具” 编程语言，IDE 和调试器都非常缺乏。虽然现在有了一些解决方法 —— 比如Venkman Debugger 或 IE Script Debugger（参见 参考资料） —— 但它们很难使用而且所提供的特性也不多。在需要重新加载站点和持续单击直至触发了正确的函数时，很多开发人员还是要继续在其代码和开发中使用 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 显示了这个步骤:

图 6. 在 Firebug 设置一个断点

现在，选择下拉列表中的任一元素以查看 JavaScript 执行如何停止。通过使用菜单栏中的任意按钮 —— 或快捷键 F8（继续）、F10（单步跟踪跳过子函数）和 F11（单步跟踪进入子函数）—— 就可以逐行执行代码。

Firebug 在左侧显示代码；在右侧显示针对当前作用域的所有已定义的变量和对象。在DOM 元素上单击直接转到 HTML DOM 视图，并且，正如先前一样，仍然可以动态修改数据。在源代码内的变量上悬停则会显示其内容。要添加新的被观察元素，可以将其输入到 New watch expression 并按 Enter。

如果选择 Console 选项卡，代码会在执行停止了的函数的上下文内执行—— 这就让您得以动态修改变量内容或调用函数。在Console 或代码的任何部分内生成的错误都会显示于Console 内。直接选择此错误会将您带到错误发生的代码段。

毫无疑问，Firebug 提供了一种更加自然的处理 JavaScript 的方式，并且提供了更好的灵活性。熟悉了 Firebug 之后，您就会离不开它，而且不禁会问，之前没有使用 Firebug 时是如何编写出 JavaScript 代码的。

查看客户机和服务器间的通信

Web 2.0 应用程序在后台异步通信，所发送的数据可以是 JavaScript、JSON 或者是 XML。由于 JavaScript 代码接收数据，前端不会直接看到后端发来的任何调试数据。因此，这类通信必须直接查看。

选择 Firebug 中的 Net 选项卡 —— 在后台，该工具已经记录了所有的页面请求:

图 7. 使用 Firebug 查看网络流量

菜单栏让您可以按请求类型进行过滤，而请求前面的小三角则让您可以看到请求和响应头以及响应本身。时间栏则可展示应用程序中有无瓶颈。

还有很多其他的方式可以查看客户机和服务器间的通信，比如 Fiddler2 工具、Wireshark、MicrosoftNetwork Monitor 等。有关这些工具的介绍超出了本文的范围，但希望将来能有文章对此做更详细的介绍。

在实际站点做测试

若能将脚本应用于现有的实际站点岂不是很妙?这类站点一般为他人所有，我们无从访问其应用程序源代码，只想测试新特性同时又不会影响其他站点。对于大多数人而言，Google搜索结果页面满足这三个条件，而且也是我们下一个示例的重点。在单独的一个浏览器窗口，用 www.google.com进行搜索，并看看如何能提高搜索结果。

最简单的一种修改 DOM 的方法是结合使用Firebug Console 和 jQuerify Bookmarklet（参看 参考资料）。jQuery 是一种虽小但却功能强大的库，允许使用 CSS3 语法访问和修改 DOM 。有关 jQuery 的更多细节可以在文章 “Simplify Ajaxdevelopment 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。

图 8. 用 jQuery 增强 Google

这会向搜索栏添加一个新链接，让您可以针对 Yahoo 执行完全相同的搜索。不幸的是，您必须每次都要在页面上运行 jQuery，而且代码必须要手动执行，这显然很不方便。但是开发能更改页面的代码很简单，而且还可以对代码进行测试直到它能很好地工作为止。

一旦代码能够很好地工作，就可以使用 Greasemonkey 扩展来永久地在每次使用 Google 时都使用这一小脚本。Greasemonkey 能在网站或网页加载时将所谓的 “用户脚本” 应用于该网站或网页。要添加新脚本，右键单击状态栏中的Greasemonkey 图标并选择 New User Script。输入名称、名称空间和描述。includes 列表必须进行更改以便与所有的 Google Search 结果匹配。图 9 显示了添加新 Greasemonkey 脚本的步骤:

图 9. 添加新的 Greasmonkey 脚本

现在，打开任一文本编辑器并输入如清单 1 所示的用户脚本:

清单 1. Greasemonkey 脚本扩展 Google

                
// ==UserScript==
// @name      	Yahoo Search on Google
// @namespace 	google_yahoo
// @description Adds a Yahoo link to the Google results page
// @include 	http://www.google.com/search
// ==/UserScript==
var jq = document.createElement('script');
jq.src = 'http://code.jquery.com/jquery-latest.js';
jq.type = 'text/javascript';
document.getElementsByTagName('head') [0].appendChild(jq);

// Wait for jQuery to be loaded
(function wait_jq()
{
	if(typeof unsafeWindow.jQuery == 'undefined')
	{
		window.setTimeout(wait_jq,100);
		return;
	}
	$ = unsafeWindow.jQuery;
	$('#sd').append(
		' &gt; Search at <a href="http://search.yahoo.com/search?p=' 
		+ encodeURI($('input[@name="q"]').attr('value')) 
		+ '">Yahoo</a>'
	);
})();

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

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

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

结束语

本文介绍了处理 Web 页面、脚本和应用程序的各种不同方式。您看到了如何使用 Web Developer Toolbar 检查页面，如何使用Firebug 扩展在需要时修改内容。您还对如何使用断点和对象检查轻松地调试JavaScript、如何永久地修改内容以提高自身经验有了大致的了解。

无庸质疑，这些工具中的每一个都完全可以用整篇文章甚至一个系列文章加以介绍。但在学习所有与其相关的高级特性和功能之前，最好先开始实际使用和熟悉这些工具 —— 这也是本文所要鼓励您去做的。