一、chrome DevTools开发这调试工具之断点调试

各类断点使用时间概览

最广为人知的断点类型是代码行断点。 但是，如果您不知道在何处查找，或者您处理的是大型代码库，则无法高效设置代码行断点。 了解如何使用及何时使用其他类型的断点后，即可在调试时节省时间。
如需了解调试流程的实践教程，请参阅在 Chrome DevTools 中调试 JavaScript 入门。

断点类型	在以下情况下暂停时可使用此断点类型
代码行	在确切的代码区域中
条件代码行	在确切的代码区域中，且仅当其他一些条件成立时。
DOM断点	在更改或移除特定 DOM 节点或其子级的代码中。
XHR断点	当 XHR 网址包含字符串模式时。
事件侦听器	在触发 click 等事件后运行的代码中。
异常	在引发已捕获或未捕获异常的代码行中。
函数	任何时候调用特定函数时。

以上描述，来自Chrome官网，Tools for Web Developers，可点击查看

---

一、JavaScript代码行断点调试

适用场景：在需要确切调查的代码区域，可以使用JavaScript代码行断点调试。DevTools会在执行此代码之前进行断点暂停。
在 DevTools 中设置代码行断点方式：

1. 在Sources 标签，打开包含您想要中断的代码行的文件。
2. 在文件左侧是代码行号列，单点击可设置代码断点，出现蓝色图标

• JavaScript调试图标概览说明，开发模式点击 Sources 标签，可以进行操作对应图标进行调试，图标如下：
  
• 现在从图标的左到右分别进