在浏览器中调试JavaScript代码的最佳实践
所有开发人员都会犯错误，因此会出现错误。 我们经常面临错误，程序员必须具备良好的调试技能。 我将向您展示一些可以提高调试效率的原则。
一些好的调试原则
- 您必须首先了解您的代码应该做什么，确定问题所在并开始调试以验证您的假设。
- 找出故障的根源后，请专注于解决问题的原因。
- 当您测试您的假设时，您将设置断点和控制台日志。 所以不要忘记在完成调试后丢弃那些。
- 显然不要在生产中调试！
登录到控制台
console.log 是检查应用程序执行过程中各个点的变量值的最常用方法。 但是还有更多方法可以更方便地显示这些值。
有时我们想要检查一个复杂的对象或数组。 我们仍然可以使用 console.log(array); 但 console.table(array) 会将对象显示为一个漂亮的表格：
console.table([
{animal: 'cayman', color: 'green' },
{animal: 'crocodilian', color: 'yellow-green' }
]);
将输出：
我们也可以使用 console.trace() 来记录到达该点的确切路径。 它将输出堆栈跟踪。
function meat(){
function eggs(){
console.trace();
}
eggs();
}
我们将在控制台中看到如下内容：
eggs meat <anonymous>
您可以阅读 控制台 API 文档 了解更多方法。
断点
断点是调试 JavaScript 代码的一种更快、更轻松的方法。
在代码中设置断点的一种常见方法是使用 debugger 语句：
if (someCondition) {
debugger;
}
当代码遇到 debugger 语句执行停止时，它将启动浏览器的开发人员工具并跳转到找到 debugger 语句的行。
它将允许您暂停执行，然后逐行单步执行您的代码。 我们可以观察存储在变量中的代码和值，看看什么时候开始出错。 我们可以检查代码的当前状态，并准确了解我们在代码中的位置。
我们可以看到 调用堆栈 显示了到目前为止调用的所有函数。 Scope 选项卡显示了我们当前可用的所有变量范围，并查看每个范围中的所有变量及其值。
我们可以通过单击行号来添加或删除断点。 当代码暂停时，我们可以使用箭头在代码中移动。 通过单击蓝色箭头，您将移动到下一个断点，如果没有下一个断点，则移动到代码的末尾。
您可以按向下箭头跳到函数或向右箭头一步抛出代码一行。
调试器为我们提供了我们需要修复的确切代码行。
概括
我希望这是一个有助于调试 JavaScript 代码的小介绍。 永远记住，最好的调试工具是你的头脑，如果你不明白你要解决的问题是什么，所有这些技术都将无济于事。
