如何用7个简单的步骤，在Firefox开发工具中调试JavaScript

本文将着重于在Firefox的开发工具中调试JavaScript代码。Firefox中的开发工具是一个非常强大的工具，可以加速您的bug查找和修复过程!

我们将要采取的步骤如下:

1、示例项目介绍。

2、分析Raygun错误报告。

3、探索开发工具的剖析。

4、向代码中添加断点。

5、单步调试代码。

6、确定应用程序的状态。

7、修复Bug !

所以,就让我们一探究竟吧!

第一步:示例项目介绍

为了演示如何使用Firefox开发工具调试应用程序，我将使用一个简单的Add Person表单。此表单允许您输入第一个、中间和姓。单击“Save”按钮，表单将进行一些处理，数据将被发送到您的(虚构的)服务器。

此表单的代码有三个功能：

单击处理程序。

大写字符串功能。

一个保存功能。

不幸的是，在一个周五的晚上把它发送到生产环境之后，您开始看到仪表板上出现了错误报告。有一个bug，你需要尽快修复它。

步骤2、分析Raygun错误报告

进入Raygun的错误报告有很多信息可以用来查找和修复错误，让我们看看我们正在处理什么。

调试错误所需的信息位于堆栈跟踪模块中。

堆栈跟踪的消息部分是错误的简要概述。在本例中，对未定义的值调用toUpperCase方法。

堆栈跟踪告诉您错误发生的位置和导致错误的函数调用序列。正如您在上面的屏幕截图中看到的，错误发生在index.js文件索引的第20行capitalizeString。

知道哪一行触发了错误，意味着您可以直接跳转到错误发生的地方，并开始挖掘导致问题的原因。

步骤3:探索开发工具的结构

第一步是在Firefox中启动应用程序并打开开发工具。您可以使用快捷键CMD-OPT-I(在OSX上)或CTRL-SHIFT-I(在Windows上)来实现这一点。

现在将在browser选项卡中打开Dev工具，控制台选项卡将是活动的。这个选项卡允许您在任何时候执行任意的JavaScript代码，或者从控制台查看任何输出。日志调用。

试着键入，alert(“hello!”);然后单击回车——你应该看到警报马上就出现了。

此选项卡的左窗格具有加载到页面的所有源文件的树视图。您可以像在IDE中那样导航这些内容，因为内容显示在中央窗格中。一旦选择了脚本，您可以使用这个窗格中的Outline选项卡来查看文件功能的概述。

右边窗格为您提供了所有调试选项，稍后我将对此进行讨论。

如果您有很多文件，可以在OSX上使用CMD-P或在Windows上使用CTRL-P进行搜索，然后开始输入文件的名称。

在应用程序中，你知道问题在于index.js文件，所以从左边的列表中选择它来查看它的内容。

步骤4:在代码中添加断点

现在你可以查看你的代码了，我们希望每次都能通过一行来查看哪里出了问题。为此，我们使用断点。断点是代码中停止执行的特定点上的标记，因此您可以在那个时间点检查代码的状态，并逐行执行。

这里有几种添加断点的方法。

行断点

可能添加断点的最常用方法是找到您想要停止的特定行，并将其添加到那里。导航到您感兴趣的文件和行，并单击行号。在这一行中会添加一个蓝色标记，每次执行到这一行代码时就会停止。在下面的截图中，它将在index.js的第7行停止。

程序化的断点

如果您不希望在IDE中方便地搜索代码，那么您还可以通过编程方式添加断点。您还可以使用这种方法有条件地引入断点，例如在循环的某些迭代中，或者如果代码在页面加载时运行，并且没有时间手动添加断点。

为此，需要添加调试器;语句位于要中断执行的位置。下面的代码将具有与上面的行断点相同的效果。

错误断点

Dev工具有一个方便的特性，当它遇到代码中的异常时将停止执行，允许您检查错误发生时发生了什么。

要启用此功能，请单击包含暂停符号的停止标志图标。启用时它将是蓝色的。

步骤5:逐步完成代码

现在我们知道了如何在代码中设置断点，我们想要遍历每一行，这样我们就可以知道哪里出错了。首先，在第7行中放置一个断点——就在Add按钮的单击处理程序中，这样我们就可以从头开始。

在前一节中，我们从Raygun错误报告中推断错误来自capitalizeString方法。这个方法被调用了三次，那么，哪个实例是罪魁祸首呢?您可以更仔细地查看堆栈跟踪，发现是来自第13行的调用导致了错误。你知道第13行与中间名值有关。因此，您应该将精力集中在通过正确设计输入来重现错误。

有了这些额外的知识，您可以填充第一个和最后一个名称字段，但是将中间的名称留空，以查看这是否会触发错误。

点击保存按钮。从这里开始，Source选项卡将打开，您可以看到断点被激活。现在可以开始逐步执行代码了。为此，在调试窗格中使用四个按钮。

继续执行您的代码，直到当前行上的下一个断点步骤，将我们移动到下一行步骤，进入到当前函数调用的下一个函数调用，回到调用堆栈一级。

你要用这些来阶跃到你的capitalizeString函数。从第7行开始，使用“Step Over”按钮，直到第13行。活动线显示为淡蓝色背景，上下有线。

现在，您可以使用“Step In”按钮移动到对capitalizeString函数的调用中。

导航调用堆栈

当您像这样浏览代码时，您可能想要跳转回父函数，以检查此时发生了什么。要做到这一点，请使用Call Stack部分，该部分列出了为在代码中到达这一点而传递的所有函数，与在Raygun错误报告中显示的调用堆栈完全相同。

您只需单击这个列表中的一个项目，您将被移回该函数。请记住，执行中的当前位置没有改变，因此使用Step Over按钮将从调用堆栈的顶部继续。

步骤6:确定应用程序的状态。

既然已经导航到错误发生的位置，我们需要检查应用程序的状态并找出导致错误的原因。

在代码继续之前，有很多选项可以用来确定变量包含的值和表达式的值。我们将依次研究每一个。

鼠标悬停

确定变量值的最简单的方法是将鼠标悬停在它上面，工具提示就会弹出该值。

观察者

您可以向监视表达式面板添加表达式，该面板在代码中移动时显示表达式的当前值。这对于跟踪更复杂的表达式随时间的变化是很方便的。

您可以通过单击面板底部的“添加监视表达式”文本来添加这些内容，您可以在其中输入要添加的表达式，然后单击enter添加它。或者，您可以选择一个表达式，右键单击它，然后选择“Add watch expression”。

作用域

scope面板显示当前范围内的变量列表及其相关值。作用域面板类似于监视表达式面板，但由开发工具自动生成。作用域面板是识别局部变量的理想工具，可以避免将它们显式地添加到监视表达式列表中。

控制台

最后，Console选项卡是一个节省时间的工具，用于检查表达式值和测试代码。只需切换回Console选项卡，键入一些代码，然后单击enter。Firefox开发工具将在当前断点的上下文中和范围内执行代码。

步骤7:修复错误。

切换到Console选项卡，让我们开始分解导致错误的行，以便使用Console选项卡修复它

首先，检查value.split(“)”的输出，这样您就可以获得第一个字符，然后调用它的toUpperCase函数。

在控制台中执行表达式value.split(")将显示它返回一个空数组——错误来自此代码!由于返回值是一个空数组，我们试图在第一个项(没有定义，因为没有项)上调用toUpperCase，从而产生错误。

您可以在控制台输入完整的表达式来验证这一点:

为了解决这个问题，你需要检查传入capitalizeStringfunction的字符串是空的还是未定义的。如果是，您需要返回一个空字符串，而不需要进行任何处理。

function capitalizeString(value){ if(!value || value.length === 0){ return ''; } return value.split('')[0].toUpperCase() + value.slice(1);}

总结

这就是Firefox开发工具中调试JavaScript的快速介绍。这是一个非常强大的工具，花时间掌握它将极大地提高您的调试技能!

不幸的是，现在Firefox在使用的方便性上比不上Chrome的水平，但是它们提供开发工具仍然是很好的调试工具。

我预计在未来几个月，这些工具的特性将会有很大的提升，以确保它们在开发工具的最前沿与Chrome竞争。