【前端调试】- 断点调试的正确打开方式
我们有时候会不知道断点打在什么地方,比如想知道dom什么时候被修改的,网络请求在哪里 ,什么情况才断点。类似情况有很多,需要对应使用不同的打断点方式才可以提高效率,本文演示已VSCode Debugger为主,其实跟chrome是大同小异,不过更加直观方便。可以参考该文章【前端调试】- 更好的调试方式 VSCode Debugger
1.条件断点
有的时候我们只想在满足一定条件的时候才断住,这时候就可以用条件断点:
在代码左边打断点的地方右键单击,就可以选择条件断点:
添加表达式,比如:
当满足该条件时 代码会执行到这里停止。其余情况则正常运行。
2.LogPoint
我们总是习惯想看某个值的时候,用console.log.虽然这是最简单直接的,不需要断住代码,但是会在代码中留下console.log,可以采用更优雅的方式
输入后点击回车键确定
3.异常断点
代码抛了异常,你想知道在哪抛的,这时候就可以用异常断点。它可以在没有被处理的错误或者 Promise 的 reject 处断住。
上面那个 Caught Exception 是在被 catch 处理的异常出断住。
Uncaught Exceptions 更常用一些。
4.DOM 断点
有时候我们想知道DOM是在什么时候移除或者修改的,setState以后源码内部做了什么操作,我们不知道代码在什么地方,可以直接在浏览器控制台,选择对应的情况,再次刷新页面操作后,代码会在对应的地方断住,我们看调用栈就可以看到相应执行过程
也可以快速找到setState的地方
5.Event Listener 断点
之前我们想调试事件发生之后的处理逻辑,需要找到事件监听器,然后打个断点。
但如果你不知道哪里处理的这个事件呢?
这时候就可以用事件断点了:
打开 sources 面板,就可以找到事件断点,有各种类型的事件:
比如你不知道点击登录对应的事件处理函数的话,点击以后代码就会在事件处理器断住,因为 React 是合成事件,也就是事件绑定在某个元素上自己做的分发,所以这里是在源码处理事件的地方断住的。用 Vue 就可以直接在事件处理函数处断住。
6.url 请求断点
当你想在某个请求发送的时候断住,但你不知道在哪里发的,这时候就可以用 url 请求断点
比如这样一段代码,你想在发送 url 包含 login 的请求的时候断住,就可以使用 url 请求断点:
调用栈也清晰的记录了整个发起请求的过程,对于分析网络请求是非常有用的
总结
很多时候我们想打断点却不知道应该打在哪里,这时候就要用其他的断点类型了:
[*]异常断点:在抛异常处断住
[*]条件断点:在满足某个表达式的时候断住
[*]日志点:打印日志但不断住,觉得断住太多次的时候可以用这个
[*]DOM 断点:在 DOM 子树修改、属性修改、节点删除的时候断住
[*]Event Listenter 断点:在某个事件发生的时候断住
[*]url 请求断点:在发送 url 包含某内容的请求时断住
加上普通断点,一共 7 种。
来源:https://www.cnblogs.com/leise/p/17025620.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页:
[1]