【JavaScript调试】停止使用 console.log() 并开始使用浏览器调试

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

可能你和我一样，在成为软件开发人员的路上遇到了很多困难。 大多数新的开发人员面临的最常见的困难之一就是调试。 一开始，当我意识到我可以在 chrome 和 console.log() 中打开控制台来发现我的错误时，我以为我找到了圣杯。结果证明这是非常低效的。为了幽默起见，这里有几个我最喜欢的用例：

console.log('Total Price:', total) //查看是否有值
console.log('Here') //判断程序是否执行到某个函数

我想大多数开发人员开始意识到这不是你调试程序的好办法。 一定有更好的方法！

好的，谢天谢地，你的浏览器是个很好的调试工具。 具体来说，我将讨论 Chrome 开发者工具。

在这篇文章中，我将介绍如何使用断点，单步执行代码，设置监视表达式以及在 Chrome 开发者 工具 中应用修复的程序。

为了完成本教程，您需要使用我创建的代码示例存储库。 点击这里 。 （可能需要一点时间加载）

第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） 应该是 39.6 ，但是我们得到了一个差别很大的结果，是 15500.1 …… 呀！

第2步：学习使用源代码(Sources)面板

要在 Chrome 中进行调试，您需要习惯使用 DevTools 。 要打开Chrome开发者工具，请按 Command + Option + I （Mac）或 Control + Shift + I （Linux）。

单击顶部的源代码(Sources)面板后，您应该可以访问三个面板进行调试。文件导航器，源代码编辑器和调试窗格。点击这些面板稍微熟悉一下，然后再继续执行第3步。

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

在向您展示如何设置第一个断点之前，让我首先通过使用 console.log() 来演示我的意思。 很明显，在我们的程序执行中，计算 subtotal(小计) 的时候我们使用了很多 console.log() 。 可以通过执行以下操作来调试程序：

幸运的是，浏览器中的开发工具不再需要这样做。 相反，我们可以简单地设置断点并逐步执行代码，以便在浏览器中实时看到相应的值。

我们来谈谈如何设置断点。 断点是浏览器查找的内容，以便知道何时暂停代码的执行并允许您有机会对其进行调试。

出于我们的目的，我们将在鼠标事件程序执行的最开始的地方设置断点。

在调试器窗格上，展开“Event Listener Breakpoints（事件侦听器断点）”的视图。 从那里，展开 “Mouse”（鼠标事件）。 然后勾选 ‘click’ 。

现在，当您单击 Calculate Bill 按钮时，调试器将在第一个函数 “onClick()” 的第一行暂停执行。 点击按钮后调试器都会跳到该位置。

愚人码头注：如果你的 Chrome 安装了很多插件，这种事件侦听断点很容易受到干扰，建议你在无痕模式下调试。

第4步：一步一步追踪你的代码执行

在所有调试工具中，用户都有两个选项来导航代码的执行。 用户可以 “step into（进入）” 和 “step over（跳过）” 函数的下一个调用。

“step into（进入）”按钮将允许每个函数内的每行代码逐个执行。

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

“step over（跳过）”，意味着跳出已知正在运行的整个的函数。

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

这是我单步执行代码的示例。在 Scope 选项卡下，起初设置的三个 entree 值显示在右侧。

第5步：设置代码行断点

哇！ 能够一步一步追踪你的代码执行是非常令人吃惊的，但有点笨重和麻烦对吗？ 通常，我只想知道某些位置的值。 这个问题的解决方案是代码行断点。

作者注：代码行断点是我停止使用 console.log() ，支持 Chrome 开发者工具的原因

要设置代码行断点，只需单击要查看其详细信息的行号。 然后像往常一样运行代码，执行将停止在你所设置的代码行断点上，而不是需要逐步执行每个函数。

注意：如果遇到问题，请确保取消选中 “Mouse” 下的 ‘click’ 复选框。

如您所见， subtotal(小计) 值显示为“10812”。 所有 entree 值也显示在 scope 窗格中，同事也在代码窗格中叠加显示（浅黄色背景）。

嗯……我想我可能已经弄明白了这个bug。 entree 值被当做字符串连接了?

让我们设置一些监视表达式，以确认这个判断。

第6步：创建监视表达式

那么现在我们知道了我们的 entree 值没有正确地加在一起，让我们在每个值上设置一个监视表达式。

监视表达式将提供有关代码中任何给定变量或表达式的更多信息。

要将值定义为“监视”，请单击最顶部的 watch（监视） 窗格，并单击 + 符号打开。 在这里，您可以键入 变量名 或 其他表达式 。

对于这个 demo，我将设置监视第一个 entree 值和该 entree 值的类型。

啊哈！ 我想我已经找到问题了。 似乎我的第一个 entree 存储为一个字符串！ 这个问题似乎来自于我是如何得到这个值的。 也许，querySelector() 是罪魁祸首。 其他几个值也可能受到影响。 让我们进一步调试然后在 DevTools 中修复我们的代码。

第7步：修复你的代码

经过进一步审查， querySelector() 绝对是罪魁祸首！

那么我们如何解决这个问题呢？好吧，我们可以简单地将字符串强制转换为数字值，例如使用 Number(getEntree1()) ，如第74行所示。

为了实际编辑代码，您需要转到 源代码(Sources) 左侧的 元素(Elements) 面板。如果您看不到javascript代码，则需要展开 script 标记。从那里，右键单击代码并选择 “Edit as Html” 菜单。

如果您使用的是 workspace，则可以轻松保存代码并立即查看。如果没有，您将需要使用 command + s （mac）或 control + s （linux）保存网页的本地副本。

从那里，您可以打开本地副本并查看更改。

瞧！

要是你觉得还有不明白的话，可以查看 Google Chrome DevTools 官方教程中的《 使用 Chrome DevTools 调试 JavaScript 》 这篇文章。

最后本文只是像你展示了 Google Chrome DevTools 中最常用的调试方法。但是可以完成大部分的调试需求。当然还有很多高级的调试方法，比如调用栈，Source Maps(源码映射)调试等等。完整的调试说明可以查看 Chrome 开发者工具官方文档 中 检查和调试JavaScript 部分： http://www.css88.com/doc/chrome-devtools/javascript/add-breakpoints/ ,你应该会得到不少收获。

Demo Code: https://github.com/paragzaveri/chromeDevTools

英文原文： https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff