Chrome因其开发者控制台而闻名。但是Firefox也有自己的开发工具版本！在这篇文章中，我们看看它们。
本文将重点介绍如何在Firefox的开发工具中调试JavaScript代码。Firefox内的开发工具是一个非常强大的工具，可以加快您的错误查找和修复过程！
第1步：项目介绍示例
为了演示如何使用Firefox Dev Tools调试应用程序，我将使用一个简单的添加人窗体。这种形式可以让你输入第一个，中间和最后一个名字。点击'保存'按钮后，表单将进行一些处理，数据将被发送到您的（虚拟）服务器。
这个表单的代码有三个功能：
- 点击处理程序。
- 大写字符串函数。
- 保存功能。
var saveButton = document.getElementById('saveButton');
var firstNameField = document.getElementById('firstName');
var middleNameField = document.getElementById('middleName');
var lastNameField = document.getElementById('lastName');
function onSaveButtonClick(){
var firstName = firstNameField.value;
var middleName = middleNameField.value;
var lastName = lastNameField.value;
// capitalise the names
firstName = capitalizeString(firstName);
middleName = capitalizeString(middleName);
lastName = capitalizeString(lastName);
doSave(firstName, middleName, lastName);
}
function capitalizeString(value){
return value.split('')[0].toUpperCase() + value.slice(1);
}
function doSave(firstName, middleName, lastName){
alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}
saveButton.addEventListener('click', onSaveButtonClick);
不幸的是，在星期五晚上晚些时候将其发送到产品后，您会看到错误报告进入您的仪表板。有一个错误，你需要修复它。快速。
第2步、分析Raygun错误报告
Raygun提供的错误报告有很多信息可用于查找和修复错误，所以我们来看看我们正在处理的内容。
调试错误所需的信息位于堆栈跟踪模块中。
堆栈跟踪的消息部分是对什么是错误的简要概述。在这种情况下，该toUpperCase方法正在被调用一个未定义的值。
堆栈跟踪会告诉您错误发生的位置以及导致该错误发生的函数调用的顺序。正如你在上面的屏幕截图中看到的，错误发生在文件capitalizeString第20行的功能上index.js。
知道哪一行触发了错误意味着你可以直接跳到发生错误的地方，并开始挖掘导致问题的原因。
第3步：探索开发工具的剖析
第一步是在Firefox中启动应用程序并打开开发工具。您可以使用OSX上的快捷键CMD-OPT-I或Windows上的CTRL-SHIFT-I在键盘上执行此操作。
开发工具现在将在浏览器选项卡中打开，并且控制台选项卡将处于活动状态。此选项卡允许您随时执行任意JavaScript代码或查看来自console.log呼叫的任何输出。
尝试输入alert('Hello!');并按Enter键 - 您应该看到警报立即显示。
控制台选项卡是一个有价值的调试工具，因为您可以将它用作便笺，用于在诊断问题时尝试代码和评估变量。
要调试代码，首先需要能够在Dev Tools中浏览源代码。您可以在Debugger选项卡中执行此操作。
此选项卡的左侧窗格具有加载到页面中的所有源文件的树视图。您可以像在IDE中一样导航这些内容，因为内容显示在中央窗格中。选定脚本后，可以使用此窗格中的“大纲”选项卡查看文件功能的概述。
右侧窗格为您提供了所有的调试选项，稍后我会进行讨论。
如果您有很多文件，可以通过在OSX上使用CMD-P或在Windows上使用CTRL-P来搜索它们，然后开始输入文件的名称。
在应用程序中，您知道问题在于index.js文件，因此请从左侧列表中选择以查看其内容。
第4步：为您的代码添加断点
现在你可以查看你的代码，我们希望能够一次一行地查看出错的地方。为此，我们使用断点。断点是代码中特定点的标记，可停止执行，因此您可以在该时间点检查代码的状态，然后逐行继续执行。
有几种不同的方法来添加断点，我将在这里继续。
线路断点
可能最常见的添加断点的方法是找到要停止的特定行并将其添加到此处。导航至您感兴趣的文件和行，然后单击行号。该行会添加一个蓝色标记，并且每次遇到这行代码时执行都会停止。在下面的截图中，它将停止在第7行index.js。
程序化的断点
您还可以通过编程方式添加断点，如果您不希望在Dev Tools中搜索代码时使用IDE，则可以使用这些断点。您还可以使用此方法有条件地引入断点，例如在某些循环迭代中，或者代码在页面加载时运行，并且没有时间手动添加断点。
要做到这一点，你要debugger;
在你想破坏执行的位置添加语句。下面的代码与上面的Line Breakpoint具有相同的效果。
错误断点
开发工具有一个方便的功能，当它在你的代码中遇到异常时会停止执行，允许你检查错误发生时的情况。
要启用此功能，请单击带有暂停符号的停止标志图标。启用后它将变成蓝色。
第5步：通过你的代码
现在我们知道如何闯入我们的代码，我们想要遍历每一行，以便我们能够弄清楚发生了什么问题。首先，在第7行上放置一个断点 - 就在Add按钮的点击处理程序中，这样我们就可以从头开始。
在前一节中，我们从Raygun错误报告中推断出错误来自capitalizeString方法。这种方法被称为三次，所以，哪个实例是罪魁祸首？你可以仔细看看堆栈轨迹，看看它是从第13行发出的导致错误的调用。你知道第13行涉及中间名值。因此，您应该专注于通过正确制作输入来重现错误。
有了这些额外的知识，您可以填写“姓氏”和“姓氏”字段，但将中间名留空以查看是否触发了错误。
点击保存按钮。从这里，Source选项卡将打开，您可以在其中看到已激活的断点。您现在可以开始浏览代码。为此，请使用调试窗格中的四个按钮。
继续执行代码并继续执行，直到下一个断点跳过当前行，将我们移动到下一行跳到该行下一个函数调用的步骤跳出当前函数调用，将callstack备份到一个级别。
您将使用这些步骤一直到您的capitalizeString功能。因此，从第7行开始，使用“Step Over”按钮，直到到达第13行。活动行显示为浅蓝色背景，并在其上方和下方显示线条。
您现在可以使用“Step In”按钮移动到该capitalizeString功能的调用中。
浏览调用堆栈
当你像这样移动代码时，你可能想要跳回到父函数来检查当时发生了什么。为此，请使用Call Stack部分，该部分列出了代码中已经通过的所有函数 - 与Raygun错误报告中显示的Callstack完全相同。
您只需点击此列表中的一个项目，您就会回到该功能。请记住，执行中的当前位置不会更改，因此使用“跳过”按钮将从调用堆栈顶部继续。
第6步：确定您的应用程序的状态
现在您已经导航到发生错误的位置，我们需要检查应用程序的状态并找出导致错误的原因。
有很多选项用于计算变量包含的值，并在代码移动之前评估表达式。我们将依次查看每一个。
鼠标悬停
确定变量值最简单的方法是将鼠标悬停在其上，并且工具提示将随该值弹出。
观察者
您可以将表达式添加到Watch表达式面板，该表达式在您移动代码时显示表达式的当前值。随时了解更复杂的表达随时间变化的情况。
您可以通过单击面板底部的“添加监视表达式”文本来添加这些文本，您可以在其中键入要添加的表达式，然后按Enter键添加它。或者，您可以选择一个表达式，右键单击它并选择“添加监视表达式”。
范围
“范围”面板显示当前范围内的变量及其关联值的列表。Scopes面板类似于Watch表达面板，但由Dev Tools自动生成。Scopes面板非常适合识别局部变量，并且可以避免将它们显式添加到Watch表达式列表中。
控制台
最后，“控制台”选项卡是用于检查表达式值和试验代码的省时工具。只需切换回“控制台”选项卡，输入一些代码，然后按回车。Firefox Dev Tools将在当前断点的上下文和范围内执行代码。
第7步：修复Bug
切换到控制台选项卡，让我们开始分解导致错误的行，以便您可以使用“控制台”选项卡修复它
首先，检查value.split(‘’)呼叫的输出，以便可以获取第一个字符，然后调用该toUpperCase函数。
value.split(‘’)在控制台中执行该表达式会显示它返回一个空数组 - 该代码是错误来自的地方！由于返回值是一个空数组，因此我们尝试调用toUpperCase第一个项目（这是未定义的，因为没有项目）会给出错误。
您可以通过在控制台中输入完整表达式来验证这一点：
所以，要解决这个问题，你需要检查传入capitalizeString函数的字符串是空的还是未定义的。如果是，则需要返回空字符串，而不尝试进行任何处理。
function capitalizeString(value){
if(!value || value.length === 0){
return '';
}
return value.split('')[0].toUpperCase() + value.slice(1);
}
概要
这简要介绍了如何在Firefox的开发工具中调试JavaScript 。这是一个非常强大的工具，花时间掌握它将会加快你的调试技能的发展。
不幸的是，在撰写本文时，Firefox的开发者工具并不完全达到Chrome的水平，但它们仍然非常适合调试。
我希望在接下来的几个月里看到这些工具的功能得到了很大的推动，以确保它们与Chrome在开发工具的最前沿竞争。
閱讀更多 愛碼農 的文章
