在过去的一两年里，Web 开发者们见证了我们可能称之为 JavaScript 复兴的现象。这是因为所有正在开发的炫酷 Ajax、Web 2.0、混搭、互动、协作、类桌面应用程序都是用 JavaScript 编写的。今天这一切成为可能，不仅是因为 JavaScript 语言本身得到了改进，还因为浏览器越来越符合 Web 标准。当然，诸如 Prototype 之类的跨平台 JavaScript 库的出现，为该语言添加了许多功能，同时也确保了跨平台兼容性。

那么，在当今 JavaScript 开发如此盛行的情况下，最流行的程序调试方式是什么呢？没错，就是内置的 alert 函数。

alert("value of x = '" + x + "'");

Alert 提示框可能令人不悦、丑陋且非常烦人，但多年来，它们一直是调试 JavaScript 的最佳和最简单的方式。当然，也出现过一些 JavaScript 调试器，但没有一个用起来令人兴奋，更不用说易用或高效了。

我很高兴地说，这种情况现在已经改变了。Firebug 是 Firefox 浏览器的一个开源插件，旨在成为一个一站式调试工具，不仅适用于 JavaScript，也适用于 Web 开发者所需的一切。Firebug 1.0 由小型初创公司 Parakey 的创始人之一 Joe Hewitt 编写，于 2007 年初发布。它已经迅速在 Web 开发者中流行起来，而且理由充分。

本月，我们将了解 Firebug，以便我们可以调试、检查和优化现代网页。Firebug 已经极大地提高了我的现代网页调试能力，如果这对许多其他 Web 开发者来说也是如此，我不会感到惊讶。

Firebug 作为 Firefox Web 浏览器的扩展程序分发。最容易的下载和安装方式是从 Firebug 网站 (www.getfirebug.com) 下载安装。要安装它，请单击下载 Firebug 按钮。如果您已经告诉 Firefox 这是一个允许的下载站点，您将能够下载并安装此 Mozilla 扩展程序。如果不是，您需要将 getfirebug.com 添加到您的受信任下载站点列表，然后重复下载步骤。扩展程序安装完成后，请重启 Firefox。

完成此操作后，您的 Web 浏览器看起来与以前大致相同，但有一些小的变化。首先，现在屏幕底部的状态栏中会出现一个图标。此图标看起来像是圆形中的绿色 V（表示正在运行）或带有斜线的灰色圆圈（表示已禁用）。Firebug 可以始终启用，但您可能只对调试您访问的少量站点感兴趣。因此，通过单击 Firebug 图标，或者通过转到 Firefox 菜单中的“工具”→“Firebug”，您可以指示哪些站点应该激活 Firebug，这非常有用。

您可以通过从相同的“工具”→“Firebug”菜单中选择“打开 Firebug”来将新站点添加到此列表，或者通过从相同的 Firebug 菜单中使用允许的站点对话框手动添加。在任何一种情况下，您当前正在访问的站点都将在 Firebug 中可见。

现在我们已经启动了 Firebug，我们可以用它做什么呢？让我们去 Linux Journal 网站 (www.linuxjournal.com) 找点乐子。为此站点激活 Firebug，您的浏览器窗口将被分成两半，上半部分仍然显示网页，下半部分包含 Firebug。我通常更喜欢以这种方式使用 Firebug，但如果您希望将浏览器窗口与调试窗口分开，您可能需要选择“在新窗口中打开 Firebug”，而不是简单的“打开 Firebug”。

Firebug 的主菜单包含 Firebug 图标，该图标提供与状态栏中的图标和“工具”→“Firebug”菜单相同的大部分菜单选项，以及指向 Firebug 文档和主页的链接。“检查”按钮始终位于该图标旁边，它允许您放大页面上的特定项目。该菜单栏的其余部分会根据您操作的上下文而变化，这由第二行标记为“控制台”、“HTML”、“CSS”、“脚本”、“DOM”和“网络”的按钮决定。

使用 Firebug 进行的首要且最容易的任务之一是调试 HTML。单击“HTML”按钮并选择“检查”。您会立即看到 Firebug 窗口中突出显示当前页面的 HTML 源代码。

现在，神奇之处开始了：在 Firebug 中选择“HTML/检查”后，将光标移动到网页（上部框架）上。当您移动光标时，光标经过的 HTML 元素将以蓝色突出显示。在 Firebug 框架中，与该渲染内容对应的 HTML 源代码也会突出显示。

当我知道网页的渲染出现问题，但不太确定是 HTML 源代码的哪一部分导致时，此功能特别有用。只需点击几下鼠标，您就可以轻松知道需要编辑文件的哪一部分。

Firebug 会突出显示它显示的 HTML 源代码，尽管使用的颜色与 Web 开发者们熟悉和喜爱的“查看源代码”页面不同。（我认为 Firebug 的颜色选择更好。）此外，Firebird 将 HTML 源代码显示为树状结构，包括缩进。这与所有当前元素的父标签的显示（在顶行编辑按钮旁边）一起，提供了对文档中当前元素上下文的良好理解。

检查 HTML 当然很有用且有趣，但它会变得更好。如果您双击 Firebug 框架中的文本，您现在可以对其进行编辑。显然，您的更改不会保存回服务器，这意味着您可以通过刷新页面返回到原始内容。尽管如此，从浏览器中直接替换现有页面上的文本非常有用（且有趣！）。

替换 HTML 元素中的文本是一个好的开始，但是如果我们想修改标记本身，而不仅仅是它的文本或属性呢？右键单击标签（或标签内的任何文本）将显示一个弹出菜单，允许您复制所选标签的 HTML、innerHTML 或 XPATH。您可以要求在顶部框架中显示所选标签，并在必要时滚动以到达它。

最后，您可以为此元素添加新属性，或要求在 DOM 选项卡中检查该元素。实际上，DOM 视图提供了查看同一文档的另一种方式。在仍然检查其中一个 HTML 元素时，单击 Firebug 框架第二行的“DOM”按钮。框架更改其外观，列出与该元素关联的大量 DOM 属性。因此，在 DOM 选项卡中检查图像会显示其类型为 IMG，而检查链接会显示其类型为 A。与往常一样，Firebug 允许您通过单击值并替换它来编辑您喜欢的任何属性。

到目前为止，我们已经了解了 Firebug 如何帮助检查和修改 HTML。但是，当然，HTML 仅为页面提供基本内容和结构；如果您知道自己在做什么，您也可以检查和修改 CSS 定义。

CSS 的许多惊人而巧妙之处之一是它处理继承的方式。如果您在 css1.css 中为 <p> 设置了一些属性，并在 css2.css 中设置了其他属性，则两者都将应用于文件中的 <p> 标签。情况可能比这更复杂，例如当您有一个带有 id 属性的 <p> 标签，并且具有冲突的样式信息时。在这些情况下，最具体的样式（即 id 标签）适用。

在具有许多不同样式的大型站点上，有时可能难以跟踪正在应用哪些样式。幸运的是，Firebug 提供了一些很棒的功能，用于检查与站点关联的 CSS，甚至用于编辑它。

要使用此功能，请单击“CSS”按钮（在我们之前使用的“HTML”按钮旁边），然后单击其上方的“检查”按钮。Firebug 继续显示其当前文档的树状表示，但右侧框架显示应用于您正在指向的任何内容的所有 CSS 样式。此外，它还指示应用了哪个 CSS 文件以及该文件的哪一行。而且，似乎这还不够，它还会划掉任何被更具体的样式覆盖的样式。

与 HTML 检查器一样，您可以通过双击样式声明来轻松编辑与任何元素关联的 CSS。例如，如果您想将文本从罗马字体更改为斜体字体，您只需单击“CSS/检查”，然后指向您要更改的文本。如果 CSS 中已经存在 font-style 属性，您可以将其更改为 italic。如果没有，您可以右键单击 CSS 窗格，选择“新属性”，然后添加属性及其值。

Firebug 知道 CSS 样式的合法属性名称，因此当您开始键入时，它能够自动完成样式名称。

右侧框架提供的不仅仅是样式的文本指示。它还具有 CSS 盒模型的图形表示，显示元素、内边距、边框、外边距和偏移量使用的像素数。

最后，我们来了解 JavaScript 调试器。正如我之前提到的，JavaScript 正在成为一种主流应用程序编程语言，这意味着人们正在使用它编写越来越复杂的程序。而且，尽管多年来我一直使用 print 语句进行大部分调试，但毫无疑问，一个好的交互式调试环境可以更轻松地解决某些问题。

Firebug 提供了几个强大的 JavaScript 调试工具。它引入了一个新的日志记录系统，该系统使得无需使用 alert 函数即可生成调试输出。我仍然不敢相信有人花了这么长时间才意识到，有一种日志记录方法不会产生模态对话框会很有帮助。无论花了多长时间，我们现在都可以使用 console.log 将消息写入 Firebug 控制台，例如

console.log("Now executing the 'foo' function.")

或者

console.log("Username parameter was '" + username + "'")

实际上，Firebug 使事情变得更好，它可以嵌入类似 printf 的字符串

console.log("Username parameter was '%s'", username)

Firebug 提供了一组日志记录函数，每个函数都生成具有不同警告级别和颜色的输出。这些是

这些方法的输出会出现在 Firebug 控制台中，您可以通过单击 Firebug 图标正下方的“控制台”按钮来查看该控制台。请注意，使用这些方法意味着您的方法可能与缺少 Firebug 的浏览器不兼容。

控制台不仅是接收消息的区域。与 Ruby 的 IRB 和 Python 的交互模式一样，Firebug 的控制台允许您在页面上下文中执行 JavaScript。有兴趣获取页面上表单的列表吗？只需输入

document.forms

您将获得表单列表。您还可以使用 Prototype 风格的方法来检索有关页面大部分内容的信息，例如

$('cvb_form')

在 Linux Journal 主页上，这将生成以下表单标题

<form id="cvb_form" action="/" method="get">

Firebug 还具有监视函数、设置断点和分析函数的强大功能。转到“脚本”按钮，您将看到包含的 JavaScript 文件的源代码。（您可以通过从菜单中选择来更改您正在查看的文件。）将鼠标光标指向代码行会显示有关这些对象当前状态的信息。

单击代码允许您设置断点（包括条件断点）以复制函数（在尝试与其他程序员交流时，甚至在撰写有关编程的专栏文章时都很有用）或通过继续或单步执行代码来处理断点。

要找出哪些 JavaScript 函数花费的时间最多，以及哪些函数被调用最频繁，请使用 Firebug 的分析器。它非常易于使用。单击“控制台/分析器”按钮，然后继续您的工作，尽可能多或尽可能少地使用该网站。当您再次单击“分析器”按钮时，Firebug 会报告每个 JavaScript 函数被调用的次数、每次调用花费的时间以及每个函数的定义位置。

最后，“网络”按钮可以轻松跟踪嵌入在页面中的任何 Ajax 调用。单击“网络”和“XHR”会生成页面上已发出的 Ajax 调用的图形指示，以及每次调用执行所需的时间。如果您正在开发 Ajax 应用程序，这是找出瓶颈的最佳方法。

我很少称赞产品具有革命性，但在 Firebug 的情况下，我很想这样做。它将大量信息放入一个设计精良、易于使用的软件包中。与我的软件包交互的能力有一种隐约的 Lisp 风格，因为我突然与一个实时环境进行交互。Firebug 使我能够“看到”我的页面在做什么，并更好地理解它们。

Firebug 已经成为我武器库中不可或缺的工具，与 Web Developer 扩展程序并驾齐驱。通过这种方式，Firefox 开始证明它确实是一个互联网应用程序平台，而不仅仅是一个 Web 浏览器。