补充1:Debugger paused断点调试

2019-02-28 10:03:12
linefo
471
最后编辑:linefo 于 2019-08-29 11:38:39


Debugger paused断点调试是在Sources(资源)面板中操作的。


相关区域如下


1、在代码中插入断点


在js代码相应位置写入debugger即可


当代码执行到debugger的时候,即陷入一个“暂停”状态,这时会等待你的下一步操作。

我们先看,左边的代码淡橙色的部分显示了变量当前的值(在js代码中使用变量可以方便调试)。

右侧有两个展开的选项卡有内容,Call Stack表示调用栈,会从断点所在的位置往前追寻函数/事件执行的步骤,比如这里我们可以看到最后执行的是getSum函数,而该函数是由onclick事件触发的。Scope表示范围,我们可以在Local部分看到当前作用域的变量值这些,Global则是指全局作用域。


这种方式适合于对代码比较熟悉的情况。当不太熟悉时,我们可以通过其他方式打断点从而快速展开调试。


2、监听事件的断点


我们可以通过监听事件的方式来打断点,还是以上面的代码为例。

像上面的情况,我们需要给点击事件增加断点。

找到Event Listener Breakpoints的选项卡下面的click事件并勾选。

在网页中触发点击事件时,会在触发的位置断点


这里断点就和1的断点的维度不一样了。1的话是明显在js代码位置断点,而监听事件的断点没有特定的js代码位置,而是根据触发事件的情况变化。

后面的监听元素、监听网络请求也是有自己独特的维度。


3、监听元素的断点


还是以上面的代码为例。

DOM Breakpoints断点需要在Elements面板来设置。


subtree modifications是子节点被改变时,attribute modifications是属性被改变时,node removal是节点被删除时。

都会在触发前打断点。

这段代码会在点击按钮后,往id为sum的p标签插入内容,所以我们用subtree modifications。

触发效果:



DOM Breakpoints选项卡会有相关内容。


4、监听网络请求的断点


引用jquery来构造一个简单发起get请求的代码


XHR/fetch Breakpoints选项卡,使用右边这个Add breakpoint增加网络请求断点。


然后会要求你输入要监听的url中包含的内容,回车添加断点。如果为空的情况下回车,则添加监听所有网络请求的断点。


断点的效果:


5、点击代码行序号添加断点


这个方式类似1。

在需要断点的js代码行数字那里点击一下即可


在Breakpoints那里会有显示断点内容


6、调试断点的几个按钮



从左到右,分别是

(1)Resume script execution(停止断点调试,恢复执行代码)

(2)Step over next function call(不跳入函数中去,继续执行下一行代码)

(3)Step into next function call(跳入函数中去)

(4)Step out of current funciton (从执行的函数中跳出)

(5)Step(下一步)

(6)Deactivate breakpoints(禁用所有的断点,不做任何调试)

(7)Pause on exceptions(程序运行时遇到异常时是否中断的开关)


具体这些按钮的逻辑,需要到实际操作断点时再去理解


7、选项卡


这里说Watch选项卡和Global Listeners选项卡。其他选项卡在上面已经有涉及。


(1)Watch选项卡


2)Global Listeners选项卡