当我开始学习成为软件开发人员时，我确实遇到了很多问题。大多数新开发人员面临的最常见的困难之一是调试。起初，我以为我发现了圣杯，当我意识到我可以在chrome中打开控制台并console.log()输出我的值以发现我的bug时。这证明是非常低效的。出于幽默的目的，这里是我的一些最喜欢的用例:
console.log('Total Price:', total) //为了看到值是否存储
console.log('Here') //如果我的程序执行到了某个函数
我认为大多数开发人员开始意识到这不是你实际上应该调试程序的方式。必须有更好的方法!
幸运的是，有了，你的浏览器的调试工具。具体而言，我将讨论Chrome开发者工具。
在本文中，我将涵盖在Chrome开发者工具中使用断点、逐步执行代码、设置观察表达式和应用修复程序。
为了跟随本教程，你需要使用我创建的代码示例存储库。点击这里。 (可能需要一分钟来加载)
步骤1:重现Bug
我们首先执行一系列操作来持续重现bug。
- 在我们的例子中，我们将使用有缺陷的小费计算器。如果你还没有打开示例代码，请在此处打开。
- 输入12作为“Entree 1”
- 输入8作为“Entree 2”
- 输入10作为“Entree 3”
- 输入10作为“税”
- 选择20%作为“小费”
- 点击计算账单。总额应为39.6，但我们得到了一个非常不同的结果。相反，它似乎是14105.09…天哪!
步骤2:学习使用源面板
为了在Chrome中调试此问题，你需要习惯使用DevTools。要打开Chrome开发人员工具，请按Command+Option+I (Mac)或Control+Shift+I (Linux)。
单击顶部的源面板后，你应该可以访问三个调试面板。文件导航器、源代码编辑器和调试窗格。在进入第三步之前，点击并玩耍一下。
步骤3:设置第一个断点
在向你展示如何设置第一个断点之前，让我先演示一下我所说的console.log()的用法。显然，在我们程序的执行中，某些计算子总数的计算出了问题。可以通过执行以下操作来调试程序:
幸运的是，在浏览器中的开发工具中不再需要这样做。相反，我们可以简单地设置断点并逐步执行我们的代码，以找到浏览器所看到的值。
让我们来谈谈如何设置断点。断点是你的浏览器在执行代码时寻找的东西，以便知道何时暂停代码的执行并允许你调试它。
为了我们的目的，我们将通过设置鼠标事件在程序的执行开始时设置断点。
在调试器面板上展开“事件侦听器断点”的视图。从那里，展开“鼠标”。然后选中‘click’按钮。
现在，当你单击“计算账单”按钮时，调试器将在第一个函数“onClick()”的第一行暂停执行。如果调试器在任何其他位置，请按下播放按钮，调试器将跳过它。
步骤4:逐步执行代码
在所有调试工具中，用户在通过代码执行导航时有两个选项。用户可以“步入”或“跨过”下一个函数调用。
步入将允许每行代码在每个函数内逐个执行。
跨过将允许跳过已知工作的整个函数。
以下是我演示如何逐步执行代码的示例。在范围选项卡下，右侧显示了前三个菜肴的值。
步骤5:设置代码行断点
哇!能够逐步执行你的代码是惊人的，但有点笨重和麻烦，对吧?通常，我只想知道特定位置的值。那么，解决这个问题的解决方案是代码行断点。
为了设置代码行断点，只需单击要查看更多信息的行号。然后像往常一样运行代码，执行将停止在你设置的代码行断点上，而不需要逐步或跳过每个函数。注：如果你遇到了麻烦，请确保你已经在鼠标下取消了点击复选框。
如你所见，我的小计值按照我要求的值“10812”显示出来。我的主菜值也在作用域窗格和代码本身的叠加层中显示。
嗯……我想我可能已经找到了错误。字符串拼接吗？
让我们设置一些监视表达式以确保。
步骤6：创建监视表达式
既然我们知道我们的主菜值没有正确相加，让我们在每个值上设置一个监视表达式。
监视表达式将为你的代码中的任何给定变量或表达式提供更多信息。
要定义要“监视”的值，请单击顶部的监视窗格，然后单击+符号。在此处，你可以输入变量名称或其他表达式。
为演示，我将在我的第一个主菜值和该主菜值的类型上设置监视。
啊哈！我想我找到了问题所在。它似乎是我的第一道菜被存储为字符串！它似乎来自我获取值本身的方式。也许，querySelector()就是罪魁祸首。可能会影响其他几个值。让我们进一步调试，然后进入DevTools修复我们的代码。
步骤7：修复你的代码
经过进一步检查，querySelector()绝对是罪魁祸首！
那么我们该如何修复呢？我们可以简单地将字符串强制转换为数字值，例如，使用Number(getEntree1())，如第74行所示。
为了实际编辑代码，你需要转到“sources”左侧的“elements”面板。如果你看不到javascript代码，则需要展开脚本标记。从那里，右键单击代码，然后选择“编辑为HTML”。
如果你正在使用工作区，保存代码将很容易且可以立即查看。如果没有，你需要使用command+s（mac）或control+s（linux）保存网页的本地副本。
从那里，你可以打开你的本地副本并查看更改。
看啊！
调试方法论采用developers.google.com的灵感来源于Kayce Basques的一篇文章“开始使用Chrome DevTools调试JavaScript”。
评论(0)