设置断点的各种方法

最近在浏览文档，正好看到关于断点调试的文章，感觉发现了新大陆，这篇文章记录了怎么设置断点，以及可以设置哪些断点，并不涉及具体的调试相关操作。

在代码中设置断点

刚开始工作的时候，就接触了浏览器，一到调试的时候就知道这个操作，以为点击行号就会设断点，这样就可以调试了 :)

当然这也是最基本的设置断点的方法，当然比调试高级多了，首先需要打开并切换到tab，然后在左侧文件中找到我们要设置断点的文件并打开，在打开的页面上点击对应的行号就可以设置断点了，也可以在行号上右键添加来设置断点。当断点触发后，整个页面会暂停，会切换到tab断点进行调试，直到断点调试终止，页面才会继续运行。设置断点的行号上会显示一个蓝色的矩形框，告诉你这里有断点。

PS 当表达式跨越多行时，添加的断点会默认下移至表达式结束后的行。

在代码中设置条件断点

当你知道如何通过点击行号来添加断点的时候，你已经可以满足最基本的调试需求了。

但是如果遇到一些特殊情况，加断点不是那么舒服的时候怎么办？比如我写了一个循环，会执行10次，但是我发现第8次执行的时候程序的结果不是我想要的。（不禁想起我刚开始工作的时候也遇到过类似的问题，当时处理的方式是一只手托着下巴，另一只手放在F8键上，按几十下，坐直身体，开始调试。）显然，我们已经想到了这种场景，通过加一些条件断点，我们就可以避免一些无意义的断点。

我们可以通过右键单击行号并选择添加来添加条件断点。

这里我们会看到界面上多了一个输入框，提示我们在XXX行设置一个断点，只有满足下面的表达式时才会暂停-.-

结合上面的场景，我们在输入框中输入如下表达式，当循环计数器等于8时，页面会暂停调试，回车确认后，会得到一个黄金矩形进行标记。

删除或禁用断点

要删除断点，请从菜单栏中选择。要禁用断点，请从菜单栏中选择或直接单击设置断点的行号。

或者，我们也可以通过模块来统一管理所有的断点。点击断点对应的复选框可以禁用该断点，或者右键删除该断点。

并且一些关于断点的其它操作也可以通过右键菜单实现，比如禁用、激活所有断点等。

在 DOM 元素上设置断点

断点不仅可以设置在JS代码上，还可以设置在DOM元素上。第一次看到的时候吓了一跳，没想到还有这样的操作。

我们可以设置三种类型的断点

我们需要切换到选项卡，右键单击要添加断点的 DOM 节点，我们可以在底部的菜单项中找到这三个选项

当我们的脚本触发DOM修改时，它会直接跳转到页面并定位到修改DOM的代码行。

同时我们还可以通过模块来管理所有的DOM断点，可以看到所有的DOM断点以及它们监控的类型，还可以进行一键删除等操作。

XHR 请求的断点

我们可以通过XHR来管理XHR请求相关的断点，点击➕添加断点，我们可以选择输入链接地址，当某个XHR请求的链接与输入的值匹配时，流程就会中断，并进入断点。

或者我们可以选择直接按回车键来监控所有的XHR请求

PS如果要监控XHR请求的某个状态，可以参考下面

各种事件的断点

有了它，你再也不用担心多人开发时找不到事件处理代码写在哪里了。

这里可以监控的事件挺多的，只要勾选上，当有事件触发时就会跳转到对应的代码，截图中展开的部分展示了XHR请求周期的各种状态事件。

异常断点

当代码出现异常的时候，我们会在标签中看到错误提醒，并且可以通过后面的锚点找到对应的文件，定位到错误代码行。

但此时代码已经抛出了异常。我们可以在异常抛出前设置异常断点进行调试。点击上方的小图标，可以在程序抛出异常时设置断点。（灰色为禁用-.-浮动图标会有提示）

笔记

我只想说它真的很强大。日常生活中我能用到的功能很少。只需一个断点就能实现这么多功能。我很期待接下来能在文档中找到什么。