了解 dev-tools 不同的 debug 模式

了解不同的断点类型，才能方便快速选择适合当前情况的 debugger 模式，快速发现主要矛盾，然后完成你的 debug 游击战

代码行设置断点

打开 devtools：

1. 点击 Sources 面板
2. 打开要设置要断点的文件
3. 在代码行点击蓝色图标，显示蓝色图标后即可在下次运行时停止到此处，等效 debugger;

从代码中调用 debugger 即可在该行暂停

const a = 123;
debugger; // 代码行设置断点
console.log('will stop at debugger row');

基于条件的代码行断点

如果你想停止执行，但仅在某个条件为 true 时停止，请使用条件代码行断点

当您想要跳过与您的用例无关的断点（尤其是在循环中）时，此类断点非常有用。

操作如下：

1. 打开 Source 面板
2. 打开对应的文件
3. 点击左侧行打一个蓝色的断点
4. 鼠标右键选择 "编辑断点"

5. 选择 "条件断点"

6. 在对话框中输入符合断点的条件
7. Enter 键激活断点
8. 最后可以在 Scope 中查看结果值

日志断点

操作大部分和基于条件的代码行断点，在编辑断点后：

• 选择断点类型为 "Logpoint"
• 按 Enter 键激活断点。行号列顶部会显示一个带有两个圆点的粉色图标

⚠️： 这里输入的内容需要遵循 console.log(...args), args 的参数，比如 "name ", name," age: ",age

debug 未捕获 or 捕获的异常

debug 未捕获适用场景： 一个用户说点击登陆后页面直接洗白了，此时你只需要在 Sources 面板的 Breakpoints 部分中，启用以下任一选项或同时启用这两个选项，然后执行用户的操作后即可看到错误

怎么跳过断点

打开某些网站的控制台的时候可能会发现 sources 里有一个去不掉的 debugger 代码阻止了爱学习的你去 debug，此时你可以点击 "一律不在此处暂停" （Continue to here) 跳过断点 跳过后就可以看见他的"庐山真面目"了！恭喜老铁又学习了一招

• 参考 chrom DevTools