javascript 调试_在浏览器中调试JavaScript代码的最佳做法

javascript 调试

All developers make mistakes and as a result bugs show up. We face bugs constantly and it’s essential for programmers to have good debugging skills. I’ll show you a few principles can make you more efficient in debugging.

所有开发人员都会犯错，结果是会出现错误。 我们经常遇到错误，对于程序员来说，具有良好的调试技能至关重要。 我将向您展示一些使您更有效地进行调试的原则。

调试的几个好原则 (A Few Good Principles of Debugging)

• You have to first understand what your code should be doing, determine where issues are and start to debug to verify your assumptions.
  您必须首先了解您的代码应该做什么，确定问题出在哪里，然后开始调试以验证您的假设。
• Once you figured out the source of the failure, focus on fixing the cause of the issue.
  一旦找出了故障的根源，就应集中精力解决问题的原因。
• When you test your assumptions you’ll breakpoints and console logs. So don’t forget to discard those after you finish debugging.
  当测试您的假设时，将出现断点和控制台日志。 因此，完成调试后，不要忘记丢弃这些内容。
• And obviously do not debug in production!
  而且显然不要在生产中调试！

登录到控制台 (Logging to the Console)

console.log is the most common way to check the values of variables at various points in your app’s execution. But there are a few more ways to display those values in more convenient ways.

console.log是检查应用执行过程中各个点变量值的最常用方法。 但是，还有其他几种方式可以更方便地显示这些值。

Sometimes we have a complex object or array that we want to inspect. We can still use console.log(array); but the console.table(array) will display the object as a nice table:

有时我们要检查一个复杂的对象或数组。 我们仍然可以使用console.log(array); 但是console.table(array)会将对象显示为一个漂亮的表：

console.table([
  {animal: 'cayman', color: 'green' },
  {animal: 'crocodilian', color: 'yellow-green' }
]);

Will output:

将输出：

Also we can use console.trace() for logging the exact path to reach that point. It will output a stack trace.

我们也可以使用console.trace()记录到达该点的确切路径。 它将输出堆栈跟踪。

function meat(){
  function eggs(){
    console.trace();
  }
  eggs();
}

We’ll see in the console something like this:

我们将在控制台中看到以下内容：

eggs
meat
<anonymous>

You can read the console API documentation for more methods.

您可以阅读控制台API文档以获取更多方法。

断点 (Breakpoints)

Breakpoints are a faster and more hassle-free way to debug your JavaScript code.

断点是一种调试JavaScript代码的更快，更轻松的方法。

One common way to set a breakpoint in your code is to use the debugger statement:

在代码中设置断点的一种常见方法是使用debugger语句：

if (someCondition) {
  debugger;
}

When the code hits the debugger statement execution stops, it will launch your browser’s developer tools and jump to the line where the debugger statement was found.

当代码命中时， debugger语句的执行停止，它将启动浏览器的开发人员工具，并跳至找到debugger语句的行。

It will allow you to pause execution and then step through your code line by line. We can observe our code and values stored in variables and see at what point things start to go wrong. We can inspect the current state of the code and see exactly where we are in the code.

它将允许您暂停执行，然后逐行浏览代码。 我们可以观察存储在变量中的代码和值，看看什么时候开始出错。 我们可以检查代码的当前状态，并确切地看到我们在代码中的位置。

We can see the Call Stack showing all of the functions that were called up to that point. The Scope tab shows all the variables scopes we’ve got available at the current point and see all of the variables and their values in each scope.

我们可以看到Call Stack显示了到那时为止已调用的所有功能。 “ 作用域”选项卡显示了当前我们可以使用的所有变量作用域，并查看了每个作用域中的所有变量及其值。

We can add or remove a breakpoints by clicking on the line number. When the code is paused we can move through code using arrows. By clicking the blue arrow you will move on the next breakpoint or just to the end of the code if there isn’t a next breakpoint.

我们可以通过单击行号来添加或删除断点。 暂停代码后，我们可以使用箭头浏览代码。 单击蓝色箭头，您将移至下一个断点，或者如果没有下一个断点，则移至代码末尾。

You can press the down arrow to skip into functions or right-facing arrow to step throw the code one line at the time.

您可以按向下箭头以跳入功能，也可以按向右箭头以一次将代码单步抛出。

And the debugger gives us the exact line of the code we need to go and fix.

调试器为我们提供了我们需要修复的确切代码行。

摘要 (Summary)

I hope this was a helpful little intro to debugging your JavaScript code. Always remember that the best debugging tool is your mind and all those techniques won’t be helpful if you don’t understand what the problem is you’re trying to solve.

我希望这对调试JavaScript代码很有帮助。 永远记住，最好的调试工具就是您的头脑，如果您不了解要解决的问题，那么所有这些技术都将无济于事。

翻译自: https://www.digitalocean.com/community/tutorials/js-debugging-js-best-practices

javascript 调试