【译】如何中止使用console.log()转而使用浏览器debugger

如何中止使用console.log()转而使用浏览器debugger

原文地址：How to stop using console.log() and start using your browser’s debugger 原文做者：Parag Zaveri 译者：noobakong

当我开始成为一名软件开发者的过程当中，我确实遇到了不少困难。大多数新开发者面临的最多见的问题就是调试(debugging)。起初，当我意识到我能够打开浏览器的控制台(console)而后console.log()出来值去寻找bug在哪的时候，我认为我发现了圣杯。事实证实这是很是低效的。

为了幽默起见，举几个我最喜欢的例子：

console.log(‘Total Price:’, total) // 查看值是否已经储存

console.log(‘Here’) // 判断程序是否执行某一个函数
复制代码

我认为大多数开发人员开始意识到这确实并非实际中调试程序的方法。必需要有一个更好的办法。

庆幸的是还真有，你的浏览器的调试工具。确切的说，我下面会详Chrome开发者工具。

在本文中，在Chrome开发者工具里，我将介绍使用breakpoints（断点），单步执行代码，设置监听表达式，以及专一于定位。

为了继续学习本教程，您须要使用我建立的储库代码示例（在线demo），点击这里 (可能须要一点时间加载)

步骤1：重现Bug

咱们首先执行一系列的操做使其能一直重现Bug

1. 在咱们的例子中，咱们将使用一个车载计费器，若是你尚未打开案例，请点击这里
2. 在Entree1处输入12
3. 在Entree2处输入8
4. 在Entree3处输入10
5. 在Tax处输入10
6. 在Tip处选择20%
7. 点击Calculate Bill, 共计应该是39.6，然而咱们获得的是一个不一样的结果，出现了14105.09… ！！！

注释：这里没必要纠结数字究竟是多少的问题，就是和预期的不一样就好了。

步骤2：学习使用Sources面板

为了在浏览器中调试，你须要习惯使用开发者工具(DevTools)，打开浏览器开发者工具，Mac 按 Command+Option+I，Linux 按 Control+Shift+I

为何不用F12，啊哈哈。。

点击面板上面的sources面板选项，你应该能够访问三个面板进行调试。分别是文件导航，源代码编辑器，调试面板。在进行步骤3以前，点击熟悉一下，享受一下乐趣。

步骤3：设置你的第一个断点

在演示如何设置你的第一个断点前，让我先演示一下使用console.log()的用法。显而易见的，在咱们的程序只执行的过程当中，部分的计算是有问题的。能够这样作来调试程序：

幸运的是，在咱们的浏览器开发工具里，这再也不是必需的，相反，咱们能够简单地设置一个断点并单步执行代码，在查看浏览器的时候找到值。

咱们来谈谈如何生设置一个断点。断点是为了让你的浏览器去寻找何时暂停你的代码以容许你有调试它的机会的东西。

出于咱们的目的，咱们将经过设置鼠标事件，以在咱们程序执行的第一步设置一个断点。

在调试面板中展开Event Listener Breakpoints选项的视图。再展开Mouse,选择click按钮。

如今当你点击页面的Calculate Bill按钮的时候，调试器将会在第一个onClick()方法的第一行暂停执行，若是调试器在其余位置也有，点击播放按钮，调试器就会跳转到它。

步骤4：单步执行你的代码

在全部的调试工具中，代码执行的过程当中，导航中都会有两个选项。用户能够选择step into 和 step over 中的一个去进行操做函数运行的下一步。

step into 是规定每一个函数内部逐个执行每行代码

step over 是规定跳过正在工做运行的整个函数

注释：这二者的区别就是 step into: 遇到子函数就进入而且继续单步执行 step over:在函数内遇到子函数时不会进入子函数内单步执行，而是将子函数整个执行完在中止，也就是把子函数整个做为一步

下面是一个单步执行个人代码的例子，在Scope选项卡下，前三个entree的值展示在右边

步骤5：设置第一行代码断点

真的~可以一步一步的执行你的代码是难以想象的，可是有点庞大和累赘的，对吧？一般，我仅仅是只想知道某一区域的值。行代码断点，就是解决这一问题的方案。

代码行断点是我中止使用console.log()而选择chrome开发工具的缘由。简单的点击你想要看到更多信息的代码的行数，就能够为其设置行代码断点。像往常同样运行代码，程序就会在你设置行代码断点的位置中止而不是去单步执行每一个函数的每一行。

若是你遇到问题，请确保你已取消选中Mouse下的click选项

正如你看到的，个人subtotal值按照个人要求显示为10812，个人几个entree值也在Scope面板和代码自身上的悬浮块上展现了出来。

嗯emm。。 我想我也许找出来这个bug缘由了，字符串拼接相关？？

让咱们设置一些监听表达式来确认它。

步骤6：建立监听表达式

如今咱们知道咱们的entree值没有正确的想加，让咱们为每个值设置一个监听表达式。一个监听表达式可以让咱们从代码的任何表达式或者变量中获取更多信息。

要肯定监听的值，请单击右边面板的最上面的watch窗口，而且点击+按钮就能够输入变量名或者其余表达式。

对于这个例子，我将会给我第一个entree和它的类型值设置watch

呜呼，我想我找到问题所在了，看来个人第一个entree值是一个字符串形式存储的。多是我获取它的时候有问题。也许，querySelector()是罪魁祸首。其余的几个值也可能受到影响，让咱们在开发者工具中进一步调试咱们的代码。

步骤7：修复代码

从下面展现来看，querySelector()必定是罪魁祸首！

那咱们怎么来修复它呢？ 咱们能够简单使用Number(getEntree1())将字符串强制转换成数字，如第74行所示。

为了实际编写代码，你须要到转到sources面板左边的elements面板。若是你看不见JavaScript代码，请展开Script标签，在那里，右键点击并选择edit as HTML

若是你在工做环境下，那么保存代码很是容易。若是你不是的，须要用Command+S或者control+S来保存网页的本地副本，你能够打开它查看编辑更改。

好喽~

Demo Code: github.com/paragzaveri…

其实做为一个前端开发人员，只会用console.log来调试代码是很是低级的，虽然我也常常用啊哈哈哈，这里翻译一篇关于debugger入门级的文章，浏览器的debugger和编辑器(VSCODE等)的debugger彻底同样，能够尝试着在开发中打一打断点，体验一下调试的乐趣。 附上个人我的博客和github，持续输出，共同进步。🚲