[译]如何中止使用 console.log() 并开始使用浏览器调试代码

• 原文地址：How to stop using console.log() and start using your browser's debugger
• 原文做者：Parag Zaveri
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Augustwuli
• 校对者：Raoul1996, Marszht

在我开始软件开发者之旅时，我在这条路上遇到了不少颠簸。大多数新人要面对的最多见的困难之一就是调试代码。 起初，当我意识到我能够打开 Chrome 浏览器的控制台，而且经过使用 console.log() 输出变量值去找到 bug 在哪的时候，我以为我发现了圣杯。可是使用这个方法调试代码很是的低效。出于幽默, 这里列举了一些我喜欢使用的例子：

console.log(‘Total Price:’, total) //为了看值是否已经被变量存储了

console.log(‘Here’) //判断程序是否执行到某一个确切的函数

我认为大多数开发者开始意识到用这个办法去调试你的程序是不大行得通。这儿有更好的方法去调试你的程序！

使人万分感谢的是使用你的浏览器调试工具。我将会在下文单独详细介绍 Chrome 的开发者工具。

在本篇文章中，我会提到如下内容：在 Chrome 开发者工具中使用断点、跟踪代码、设置监测表达式和应用修复程序。

为了可以跟上个人对 Chrome 开发者工具的介绍，你须要使用我写的一个简单的例子。 点击连接（可能会花一点时间加载它）

Step 1：重现 Bug

咱们经过执行一系列的操做开始重现 bug。

1. 在这个案例中，咱们将使用一个轻便的小费计算器重现 bug。若是你尚未打开这个例子的连接。请点击这里。
2. 在 ‘Entree 1’ 中输入 12
3. 在 ‘Entree 2’ 中输入 8
4. 在 ‘Entree 3’ 中输入10
5. 在 ‘Tax’ 中输入 10
6. ‘Tip’ 选择 20%
7. 点击 Calculate Bill。计算获得的 Total Plus Tip 应该是 36.3（译者注：此处我去看过做者原博客了，这篇博客以前计算结果有问题，后来做者修改了代码，真正的结果是 36.3，因此结果和图片的结果是不同的），然而咱们获得了一个差异很大的结果。呀！结果竟然显示的是 15500.1。

Step 2：学习使用 Sources 面板

要在 Chrome 浏览器中调试代码，你得习惯使用开发者工具。你能够按快捷键 Command+Option+I（Mac）和 Control+Shift+I（Linux）打开 Chrome 开发者工具。

在点击开发者工具顶部的 sources 面板以后，你应该使用出现的这三个面板来调试代码：文件导航栏、源码编辑器和调试窗口。你能够在开始 Step 3 以前任意点击这些面板。

Step 3：设置你的第一个断点

在向你展现如何设置你的第一个断点以前，让我先展现我说的使用 console.log() 函数调试代码是什么意思。很清楚的是，当咱们的程序在运行的时候，在计算 subtotal 的时候作了一些事情。其中咱们能够按以下操做调试程序：

幸运的是用这个方法再也不须要使用浏览器开发者工具。但咱们能经过简单地设置一个断点而且跟踪代码而用浏览器发现设置的全部值。

让咱们谈论如何设置一个断点吧！断点是为了让浏览器知道何时暂停运行而且可让你有机会去调试代码。

为了咱们可以调试代码，咱们在程序运行开始以前经过设置一个鼠标事件来设置断点。

在调试窗口的最下面有个“Event Listener Breakpoints”。打开它，而且在展开的列表中打开“Mouse”列表，选择 ‘click’。

如今当你点击 Calculate Bill 按钮后，调试器将在第一个绑定了“onClick()”的函数的第一行代码的位置暂停执行。若是调试器在任何其余地方，点击 Calculate Bill 按钮后调试器都会跳到该位置。

Step 4：跟踪你的代码

在全部的调试工具中，用户可使用导航栏的两个选项经过运行中的代码。用户能够选择“进入”或者“跳过”下一个函数回调。

进入，意味着可以依次进入每一行代码调用的每个函数。

图示为进入下一个函数回调的按钮。

跳过，意味着跳出已知正在运行的整个的函数。

图示为跳过下一个函数回调的按钮。

这儿有一个跟踪代码的例子。在调试窗口的 Scope 标签下，我起初设置的三个 entree 的值都被列出来了。

Step 5：设置代码行的断点

哇哦！可以跟踪你的代码真是使人大吃一惊，可是有一点麻烦对吧？通常状况下，我只想知道在确切的地方的变量值是多少。解决这个问题的更好的办法就是设置代码行的断点。

做者注：设置代码行的断点就是我为何用 Chrome 开发者工具取代使用 console.log() 函数调试代码的缘由。

为了设置代码行的断点，只须要简单地点击代码的行数，而后你就能够看到更多关于该行代码的信息。以后你能够像往常同样跑起你的代码，调试器将会在你设置代码行断点的地方停下来跟踪或者跳过每个函数。

标注：若是你遇到了麻烦，请确认你已经取消了在前面已经选择的鼠标的 click 事件

正如你看见的那样，显示获得 subtotal 的值是“10812”。在代码被执行到全部 entree 变量的时候，设置的 entree 的值也在 scope 标签下被列了出来 。

嗯...我认为我已经向你指出了 bug。字符串链接了全部的变量?

让咱们设置监测表达式来确认这个想法吧！

Step 6：建立监测表达式

到目前咱们已经很明确地知道了这些 entree 变量并无被正确地加起来，让咱们在每个 entree 变量上都设置监测表达式。

一个监测表达式能提供更多关于代码中的变量或者表达式的信息。

为了“监测”被声明的值，请点击在调试窗口顶部的 watch 标签，而后在打开的面板中点击 + 号。你能够在这里写下变量名或者其余的表达式。

经过下面这个 demo，我将监测第一个 entree 的值而且使用 type of 来发现 entree 变量的类型。

啊哈！我以为我已经发现了问题。问题出在了我定义的第一个 entree 变量存储了 string 类型的值。这个问题彷佛来自于我是如何获得这个值的。querySelector() 或许是罪魁祸首。其余的几个变量值可能也收到了影响。让咱们移步到在开发者工具中修改代码进一步调试吧！

Step 7：修复你的代码

让咱们回到代码中，querySelector() 必定是罪魁祸首!

因此咱们应该如何修改它呢？咱们能够强制将 string 转换成 number 类型。例如，在 74 行将代码改为 Number(getEntree1())。

为了可以实际编辑代码，你将须要到 ‘sources’ 面板左边的 ‘elements’ 面板下。若是你不能看到 javascript 代码，你须要展开 script 标签。在这里点击鼠标右键并选择 ‘edit as html’。

你过你正在使用 workspace，能够很方便地保存代码并立刻看到效果。若是不是的话，你须要使用 command+s (mac) 或者 control+s (linux) 保存这个 web 页面的本地副本。

至此，你能够打开本地副本并查看修改后的变化。

瞧！

---

这个由 Kayce Basques 在 Get Started with Debugging Javascript in Chrome DevTools 描述的调试方法已经被收录在 developers.google.com 了。

Demo Code: github.com/paragzaveri…

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。