DevTools — 如何用善用设置断点 (breakpoint) 加速 debug?

在 DevTools — 如何在开发者工具上 debug 原始程式码?一文中，我们谈到可以如何透过浏览器开发者工具的来源面板 (sources panel)。

在了解可以透过 source map，让使用框架的程式码也能在浏览器上 debug，接着让我们来谈具体可以如何透过开发者工具的来源面板，让 debug 变得更容易。而当谈到来源面板，就不能不谈断点 (breakpoint) 这个好用的帮手。

假如有用过其他程式语言 (特别是在写后端时的其他语言)，可能对设置断点 (breakpoint) 来 debug 并不陌生。可能因为在前端的 debug 过程中，埋 console.log 来看问题相对来说比较容易，所以许多前端工程师，在查找问题时，总是第一时间会在程式码中放多个 console.log 借此来观察不同变数的值的变化。

用 console.log 是个不错的方法，但资深一点的前端工程师，通常不会只用 console.log，而是会透过设置断点来 debug。

断点 (breakpoint) 如其名所称，是一个可以让程式执行时被中断的中途点，只要在程式中埋设断点，就可以在程式运行到设有断点的那一行被中断，而这时开发者就能检视在中断的当下相关变数的值是什么。

使用断点比起用 console.log 好在哪?

假如先前没有在用断点的读者，可能会问既然 console.log 已经能够有效协助 debug 了，为什么还需要断点呢? 使用断点有什么额外的好处?

首先，断点可以让程式暂时中止运行，所以开发者可以精确地停在某一个想要检视的时间点。

举例来说，在来源面板中可以找到事件监听器 (event listener) 的断点设置，这时如果点击了画面上的按钮，就可以很精准地停在该点击事件之后。但是假如用 console.log，假如程式码中有写其他的逻辑，很可能点击后程式一直跑，导致 console.log 会印出很多东西，让 debug 时有很多杂讯。

第二个用断点的好处，是在断点暂停的片刻下，开发者可以检查当下各个变数的值 (像下图这样，断点暂停时，只要在开发者工具打下某个变数名称，就能检视该变数的值)。但假如用 console.log，想要检视某个值就要特别写出来，因此假如要写多个值，就要在 console.log 中写很多东西，会很麻烦。

如何设置断点?

要在程式码中设置断点，有两个简单的方式能够做到。第一个是直接在程式码当中写 debugger

，像下图这样。这个用法就跟在程式码中埋 console.log 很类似。因此推荐读者们，假如未来要用

console.log 时，可以试着把它换成 debugger。

另一个设置断点的方式，是直接在来源面板的某段程式码中，点击该行程式码即可。这个做法甚至不需用打开程式的编辑器，这也是许多资深工程师推荐用断点的原因，可以更快速的直接针对想要看的程式码，点击下去就完成断点设置，然后就能直接查看该断点时的各种值是否如预期。

阅读更多

以上我们介绍了如何用善用设置断点 (breakpoint) 加速 debug?，关于使用浏览器的开发者工具，我们在 E+ 成长计划中的主题文有更深入、实用的探讨。

对更深入了解这个主题，以及其他前后端开发、软体工程、AI 工程主题感兴趣的读者，欢迎加入 E+ 成长计划一起成长 (连结)。