简单来说，断点调试就是在程序的某一行设置断点。调试的时候，程序运行到这一行就会停止，然后就可以一步步调试了。在调试过程中，可以看到每个变量的当前值。如果有错误，当你调试到错误的代码行时会显示错误，并停止。在Web开发中，断点是调试代码的常用方法。现在在这里简单翻译一下官方对这个功能的解释，插入一些自己的解释。文章翻译自：https://developers.google.com...Whentousewhichtypeofbreakpoint：Line-of-code：在DevTools代码中知道要标记的具体区域；Conditionalline-of-code：在DevTools代码中知道具体要标记的区域并设置条件，只有为真才执行断点操作；DOM：在body中添加，检测节点或其子节点的增删和属性变化；XHR：在xhrurl中包含具体内容事件监听器：触发特定事件时打点；Exception：抛出异常时打点；函数：调用特定函数时打点；debugger：在写好的代码中想打点的时候手动打点；BreakpointmethodLine-of-codebreakpoints浏览器将执行解析操作，直到被标记的代码行（不包括该行代码）。操作：f12->SourcesTab->双击打开需要打点的文件->找到需要打点的代码行->点击行号，出现蓝色标记，打点为完全的。再次单击标记将删除当前断点。在代码中输入debugger也可以在指定位置暂停，相当于代码行断点，只是在DevToolsUI中没有设置。console.log('a');console.log('b');调试器；//Pausehereconsole.log('c');Conditionalline-of-codebreakpointswhenyouwanttoconditionallydot使用条件代码行的方式。操作：f12->SourcesTab->双击打开需要标记的文件->找到需要标记的代码行->右键点击行号，选择Addconditionalbreakpoint->输入在出现的对话框中条件->点击回车，出现橙色标志，打点完成。管理断点所有断点都可以在BreakPoints面板上统一管理。上图显示页面有两个断点，一个在get-started.js的第15行，一个在第32行。当前断点、禁用当前断点、禁用所有断点、移除所有断点、移除其他断点。禁用所有断点相当于删除所有复选框；禁用当前断点会导致浏览器忽略此断点，但断点位置和图标仍会保留，以便重新激活；移除断点会直接移除这个断点；DOM更改断点在文档节点更改时暂停。操作：f12->ElementsTab->点击要监控的节点->右键点击节点->在出现的菜单上选择Breakon->根据需要选择Subtreemodifications,Attributemodifications,Noderemoval。dom改变断点类型：●子树修改，在当前节点的子节点增加、删除、内容改变、顺序交换时生效。其他情况如当前节点发生变化，或者子节点的属性发生变化等都不会触发。●属性修改，当当前节点的属性发生变化时触发，例如添加属性、删除属性或更改属性值。●节点移除，当前节点移除时触发。XHR断点当你想监听特定的xhr请求时使用xhr断点。指定一个特定的字符串，当出现包含该字符串的xhrurl时，DevTools将在调用xhr.send()方法的地方暂停。xhr断点对于获取请求也有效。对于一些封装好的xhr请求，比如JQuery的ajax方法，浏览器无法定位调用的地方。操作：f12->SourceTab->XHRBreakpointspanel->点击+号->在出现的对话框中输入指定的字符串，当有包含该字符串的xhr请求时浏览器会暂停（不管in中的字符串是什么）url在哪里）->回车完成断点。事件监听断点监听事件，事件发生后暂停，断点到事件绑定的位置。支持单个事件，如click，以及一整类事件，如所有鼠标事件。操作：f12->SourceTab->展开EventListenerBreakpoints面板，会列出所有可以监听的事件->展开后全选或单独选择事件完成断点。上图是移动设备的手持设备方向事件（横竖屏转换）上的点。异常断点当您想要捕获报告异常的代码时，请使用异常断点。操作：f12->SourceTab->点击Pauseonexceptions暂停图标->图标变为蓝色，表示未捕获的异常发生时断点功能开启。可选操作：勾选PauseOnCaughtExceptions，在捕获到异常时启用断点。try{throw'aexception';}catch(e){console.log(e);}上面try里面的代码会遇到异常，但是下面的catch代码可以捕获异常。如果所有异常都被中断（PauseOnCaughtExceptions被勾选），那么代码会在到达会产生异常的throw语句时自动中断；如果是遇到未捕获的异常才中断，那么这里不会中断。一般我们更关心遇到未捕获的异常。当您要调试特定函数时，会使用函数断点。功能与本函数第一行代码设置断点相同。操作：在代码中插入debug(functionName)或者在浏览器控制台中调用。在代码中插入：functionsum(a,b){letresult=a+b;//浏览器在这里暂停returnresult;};debug(sum);//参数是函数，不是字符串sum();控制台调用：在控制台输入debug(sum)，回车，再次触发sum操作，进入断点页面。注意确保目标函数和调试函数在同一个作用域内，否则会报ReferenceError：
