每当我看到有人在浏览器中非常有效地调试 JavaScript 时,他们都会使用 DevTools 工具来完成此操作。设置断点并跳过它们等等。这与在代码周围散布console.log()
(以及朋友)语句形成对比。
Parag Zaveri 写了关于过渡的文章,它显然引起了很多人的共鸣!(在我撰写本文时,Medium 上有 7.5k 个赞。)
我知道我对此有一些顾虑……
- 调试的一部分不仅仅是按原样检查一次代码;它是检查内容,进行更改,然后继续调试。如果我花大量时间设置断点,在我更改代码并刷新后,它们还会存在吗?答案:DevTools 似乎在这方面做得很好。
- 查看控制台以查看某些输出是一回事,但在“源代码”面板中进行操作是另一回事。那里的代码可能是转译的、组合的,并且看起来不太像我编写的代码,这使得难以找到内容。此外,从视觉上看,空间有点狭窄。
但它确实很强大。设置断点(只需单击行号)意味着我不必在我的代码中散布额外的垃圾,也不必选择要记录的内容。本地和全局作用域中的每个变量都可以在该断点处供我查看。我在 Parag 的文章中学到,您可能甚至不需要手动设置断点。例如,您可以让它在每次单击(或其他)事件触发时中断。此外,您可以输入您要专门监视的变量名称,因此您不必四处寻找它们。我将尝试更频繁地使用适当的 DevTools 进行调试,并看看效果如何。
不过,既然我们正在谈论调试……几个月来我一直都在想:为什么 JavaScript 没有日志级别?显然,这是许多其他语言中非常常见的概念。您可以编写日志语句,但只有在配置指示应记录时,它们才会记录。这样,在开发中,您可以获得详细的日志记录,但在生产中仅记录更严重的错误。我之所以提到这一点,是因为在代码中保留有用的日志语句会很好,但如果设置了console.level = "production";
或其他内容,则不会实际记录它们。或者,它们可以在构建步骤中被编译掉。