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

10年服务1亿前端开发工程师

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

可能你和我一样,在成为软件开发人员的路上遇到了很多困难。 大多数新的开发人员面临的最常见的困难之一就是调试。 一开始,当我意识到我可以在 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

赞(2) 打赏
未经允许不得转载:WEB前端开发 » 【JavaScript调试】停止使用 console.log() 并开始使用浏览器调试

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏