当我开始我的软件开发工程师之旅时，发现在这个过程中经历了许多困难。其中一个最常见的困难就是每个新手都会遇到的-调试。起初，当我发现可以打开控制台查看console.log()输出的值以定位bug，我像是发现圣地一样哈皮。但是这种方法是低效的。来几个我喜欢并且比较幽默的例子：
console.log(‘Total Price:’, total) //In an effort to see if the value was storedconsole.log(‘Here’) //If my program execution reached a certain function复制代码我想大多数开发者开始意识到这并不是调试你程序的好方法。还有更好的方式。
这个好方法就是浏览器的调试工具。在本文中，我使用chrome开发者工具。
在这篇文章中，我将介绍如何使用断点，单步执行代码，设置监视表达式以及在Chrome开发者工具中应用修复程序。
为了更好地完成本教程，你需要使用我的实例代码。点击这里(需要**)
第一步：重现bug我们首先执行一系列会出bug的操作。
1、在本例中，我们使用有bug的小费计算器。
2、在‘Entree1’输入12
3、在‘Entree2’输入8
4、在‘Entree3’输入10
5、在‘Tax’输入10
6、在‘Tip’处选择20%
7、点击计算账单按钮，一共应该是39.6，然而，我们得到不同的答案，结果是14105.09。。。yikes！


第二步：学习使用资源面版在chrome中调试，你需要打开开发者工具。按下Command+Option+I (Mac) 或者 Control+Shift+I (Linux)就可以打开了.


打开资源面版，如上图。文件导航栏、源代码编辑器、调试栏。在第三步之前熟悉熟悉吧。
第三步：设置你的断点在使用断点之前，让我先用console来调试。很明显，可以通过以下操作来调试：


幸运的事，在浏览器上不需要再像这样开发了。相反，我们可以设置断点一步一步地看我们代码的运行情况。
来看看如何设置断点，断点是浏览器查找的内容，以便知道何时暂停代码的执行并允许您有机会对其进行调试。
出于教学目的，我们使用设置鼠标事件在程序的最开始设置断点。
在调试器那一栏上，展开“事件侦听器断点”的视图。 从那里，展开“鼠标”。 然后勾选“点击”按钮。
现在，当你单击Calculate Bill按钮时，调试器将在第一个函数“onClick（）”的第一行暂停执行。 如果调试器位于其他任何位置，请按下播放按钮，调试器将跳过它。
第四步：开始调试在所有调试工具中，都有两个执行代码的按钮。开发者可以进入函数里面或者跳过函数。
不遗漏每一个方法的每一行代码。
进入方法里面执行代码跳过方法
跳过方法执行下一行代码这是我单步执行代码的示例。 在范围选项卡下，前三个输入框的值显示在右侧。


第五步：在行数那里设置断点真是太好用了，但是有个问题。这样设置断点有点太笨了，通常我们只需要在某个地方查看。有个好的方法，可以在某一行的行数那里设置断点
作者的画外音：这个功能让我彻底抛弃console方法并爱上了调试工具。
只要点击代码行号就可以设置代码行断点了。然后运行你的代码，调试器就会停在你设置断点的地方。
提示：如果遇到问题，请确保取消选中鼠标下的单击复选框。


如你所见，我的subtotal值显示为“10812”。我的entree值在面板显示了出来并且也计算出来了。
emmm。。。似乎是进行了字符串拼接。
让我们再看几个表达式搞清楚整个流程。
第六步：创建监视表达式现在我们知道我们的entree值并没有正确加在一起，让我们在每一个值上设置监视表达式。
监视表达式将提供有关代码中任何给定变量或表达式的更多信息。
要将值定义为“监视”，请单击最顶部的监视窗格，并在打开后单击+符号。 在这里，你可以键入变量名称或其他表达式。
在这个例子中，我将设置在我第一个entree值上监视值和类型。


Aha！我想我找到bug了。我的第一个值储存为字符串！似乎是querySelector方法搞的鬼。也可以搞搞其他的值。让我们更进一步调试然后在DevTools中改我们的代码。
第七步：修复经过进一步的审查，querySelector方法绝对是罪魁祸首。


那么我们如何解决这个问题呢？ 好吧，我们可以简单地使用例如Number（getEntree1（））将字符串强制转换为数字值，如第74行所示。
为了实际编辑代码，您需要转到'sources'左侧的'elements'面板。 如果您看不到javascript代码，则需要扩展脚本标记。 从那里，右键单击代码并选择“编辑为html”。


如果你使用的是工作区，则可以轻松保存代码并立即查看。如果不是，则需要使用名令command+s (mac) or control+s (linux)来保存。
然后你可以看你的本地代码的变化。



【转载】
链接：https://juejin.im/post/5bcb44ef6fb9a05d134317f6