【Debug】 你所不知道的各种前端Debug技巧系列 Sources - Breakpoints---第12天

此篇文章将说明如何透过Sources 面板建立断点来暂停JavaScript 的执行，除了手动标记行号以外，还有非常多种方式，适用不同的情境。

注意重整页面不会影响以建立的断点，这也是断点的一大核心机制

概览

最常见的断点建立方式就是标记特定一行程式码，但面对各种不同Debug 情境，尤其是程式码非常多时，可能无法一下就找到精确的档案或位置，此时直接标记的方式就显得没有效率。

本篇文章中笔者将会介绍Sources 面板的右侧子面板中关于各种断点的建立方式以及使用时机，断点主要有分为：

标记– 执行到程式码特定位置
条件标记– 同上，但只有在条件成立时才中断
DOM – 特定DOM 元素发生变化
请求– 请求的网址符合条件
Event listener – 特定事件触发
Exception – 错误产生
Function – 特定Function 执行
阅读本文时，建议搭配Demo页面Sources - Breakpoints，效果更佳。

标记

标记断点的官方名称为line-of-code，可以在该行程式码执行前暂停，不过Chrome DevTools经历多次改版，已经可以做到特定位置的标记，让标记的位置更加弹性，例如在同一行用到forEach、map等等遍历Function时可以直接跳过。

标记的方式非常简单，可以在Demo 页面中尝试：

开启Sources 面板
打开想要中断的档案
点击程式码的行号建立断点
别忘了试试特定位置的标记功能，点击行号后可以看到右方的出现了多个小箭头，在右侧的断点选单中透过右键选项跳到断点建立的位置。

除了一般的标记外，右键点击行号可以看到其他标记

Add conditional br