使用 Firebug 调试 JavaScript

调试是系统地消除缺陷的方法。它始于测试用例的执行。每当执行测试用例时，都会将实际结果与预期结果进行比较。如果实际结果与预期结果之间存在任何差异，则会进行根本原因分析，并执行额外的测试（例如回归测试），以确保结果符合预期。

为了设计静态网页，广泛使用 HTML。为了开发动态的基于 Web 的应用程序，应该使用 JavaScript（Web 的脚本语言）。为了使他们的代码无错误，程序员依赖于许多调试技术。这是避免错误和异常的好方法。但是，JavaScript 没有配备优秀的调试功能。幸运的是，使用基于 Web 浏览器的调试器 Firebug 调试用 JavaScript 编写的代码很容易。

现在让我向您介绍一些技术术语。以下是一些关于 Firebug 调试器组件的深刻见解。

  • JSEditor − JSEditor 不过就是 JavaScript 编辑器。实际上，JSEditor 允许您使用“中断所有错误”来调试 JavaScript 代码。用户只需选中此选项即可暂停脚本执行。
  • 脚本选项卡 − 控制台是 Firebug 调试器面板上的第一个选项卡。HTML 和 CSS 是面板上的第二个和第三个选项卡。脚本选项卡是第四个。脚本面板分为两个子面板——左侧的面板是 JavaScript 编辑器。右侧的面板包含两个子面板——监视和断点。
  • JSFileSelector − JSFileSelector 显示页面范围内所有 JavaScript 文件的列表。
  • 断点 − JavaScript 执行将在断点处停止。公平地说，Firebug 中有三种断点——静态、条件和动态。要设置静态断点，请单击脚本面板中所需的代码行。顾名思义，条件断点应根据条件设置。要根据函数名称设置断点，您可以依靠动态断点。动态断点有一些优点——它们可以从命令行设置。此外，它们可以使用两个常用的函数设置——debug 和 undebug。
  • 断点列表 − 所有断点都将显示在此面板中。您可以删除不必要的断点。
  • 监视窗口 − “监视窗口”对于所有精通 Microsoft Visual Studio 细枝末节的人来说都是一个熟悉的词。但是，理解 Firebug 监视窗口与 Microsoft Visual Studio 监视窗口之间存在的细微差别将大有裨益。Firebug 的监视窗口将显示所有可用变量的值作为列表。糟糕的是！仅显示范围内的变量值。相反，Microsoft Visual Studio 的监视窗口将显示所选变量的值。

如何安装 Firebug 附加组件

  • 打开 Mozilla Firefox 浏览器。在窗口的右上角，您可以找到打开菜单
  • 单击打开菜单，然后单击附加组件。将出现一个新窗口。
  • 在搜索框中，键入 Firebug 并按键盘上的Enter键。
  • Firebug 附加组件出现。单击安装。

Firebug 现在已添加到您的 Firefox 浏览器。

如何使用 Firebug 调试 Javascript 代码

这是一个简单的 8 步过程，可让您使用 Firebug 在 Firefox 中调试 JavaScript 代码

  • 在记事本文件中编写您的 JavaScript 代码。将其保存为 .htm 扩展名。在 Firefox 浏览器中打开此 .htm 文件。毫不犹豫地启动 Firebug 调试器的控制台。
  • 在所需的代码行上设置静态断点。在脚本选项卡的右侧面板上，您可以查看已分配静态断点的代码行。
  • 使用单击“单步执行”按钮逐行执行代码。此按钮位于 Firebug 工具栏上。除了“单步执行”按钮之外，您还可以看到另外三个按钮——继续、单步进入和单步退出。要继续执行脚本（一旦遇到断点），请单击“继续”。作为替代操作，您可以按 F8 键。要单步执行特定的函数调用，请单击“单步执行”。作为替代操作，您可以按 F10 键。要单步进入特定函数的主体，请单击“单步进入”。作为替代操作，您可以按 F11 键。要继续执行脚本并在下一个断点处停止，请单击“单步退出”。
  • 仔细查看监视窗口中显示的值。
  • 采取必要的措施。识别错误并修复错误。
  • 重新加载页面。为此，请单击 Firefox 的重新加载按钮。作为替代操作，您可以按组合键 Ctrl+R。
  • 监视窗口将显示大多数变量的值。但是，一个或两个变量的值可能缺失。在这种情况下，谨慎的调试器会保证 CommandLine API 的效率。要在特定函数的第一行添加断点，请使用 debug(fn)。要删除特定函数的第一行中存在的断点，请使用 undebug(fu)。
  • 修复错误后，再次执行代码。如果它有任何错误，请按照上述 7 个步骤调试代码。保存文件并在 Firefox 中预览。

程序员可以通过依赖 Firebug 的效率来消除他们最糟糕的噩梦——错误修复。有了 Firebug，调试就变得容易了。

更新于：2020 年 1 月 20 日

浏览量：587

启动您的职业生涯

通过完成课程获得认证

开始
广告