使用 Firebug 调试 JavaScript
javascriptfront end technologyweb development
调试是消除缺陷的系统方法。一切始于测试用例的执行。每当执行测试用例时，都会将实际结果与预期结果进行比较。如果实际结果与预期结果之间缺乏对应关系，则进行根本原因分析并执行回归测试等附加测试，以确保结果符合预期。
HTML 被广泛用于设计静态网页。要开发动态的基于 Web 的应用程序，应该使用 Web 的脚本语言 JavaScript。为了使代码无错误，程序员依赖于多种调试技术。这是避免错误和异常的好方法。但是，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 调试器的控制台。
- 在所需的代码行上设置静态断点。在脚本选项卡的右侧面板上，您可以查看已分配静态断点的代码行。
- 单击"Step Over"按钮逐行执行代码。此按钮位于 Firebug 工具栏上。除了 Step Over 按钮外，您还可以看到其他三个按钮 - Continue、Step Into 和 Step Out。要在遇到断点后恢复脚本的执行，请单击 Continue。作为替代操作，您可以按 F8 按钮。要跳过特定函数调用，请单击 Step Over。作为替代操作，您可以按 F10 按钮。要进入特定函数的主体，请单击 Step Into。作为替代操作，您可以按 F11 按钮。要恢复脚本的执行并在下一个断点处停止，请单击 Step Out。
- 仔细查看监视窗口上显示的值。
- 执行必要的操作。识别错误并修复错误。
- 重新加载页面。为此，请单击 Firefox 的重新加载按钮。作为备选操作，您可以按下组合键 - Ctrl+R。
- 大多数变量的值将显示在监视窗口中。但是，可能会缺少一个或两个变量的值。在这种情况下，谨慎的调试器会保证 CommandLine API 的效率。要在特定函数的第一行添加断点，请使用 debug (fn)。要删除特定函数第一行上的断点，请使用 undebug(fu)。
- 修复错误后，再次执行代码。如果有任何错误，请按照上述 7 个步骤调试代码。保存文件并在 Firefox 中预览。
程序员可以依靠 Firebug 的效率来摆脱他们最可怕的噩梦 - 修复错误。有了 Firebug，调试变得容易。
