「我正在参与掘金会员专属活动-源码共读第一期,点击参与」
本篇文章讲的是如何调试源码?
有的时候我们平时开发过程中,也会常常用到调试。以此来看我们的代码和自己心中的预期是不是一致。除了开发之外,我们阅读Vue.js
、React
等官方库都需要调试代码,了解代码的执行顺序,方便我们更好的理解代码逻辑。
通常我们调试源码最方便的就是谷歌浏览器自带的调试工具。
首先F12打开source面板,我们看到图片上红框部分,依次讲解。
这个表示继续脚本执行(执行到下个断点或结束)
这个表示暂停脚本执行
这个表示执行到下个函数前面
这两个是一对,前者是进入函数执行到,后者是执行函数剩余代码然后退出
这个是开关,激活时脚本会执行到断点停止,停止时,断点不会被识别直接跳过断点,继续执行脚本。
这个表示在有异常之前暂停脚本执行。
当激活断点鼠标右键点击时,我们可以做几个操作:
- 移除断点
- 编辑断点:与此同时可修改当前断点为条件断点,需要添加条件代码片段用于判断当前断点是否需要中断
- 禁用断点:这个和前面的断点开关是同样的效果,一个是局部的一个是全局的
- 添加脚本到忽略列表:项目中例如引用了
jquery.min.js
之类的库文件,我们调试的时候并不需要关心,那么可以将此类脚本文件右键选择添加到“黑盒脚本”中,那么在debug
单步调试时,就不会进入到此类库文件中,减少了调试步骤。
当空白鼠标右键点击时:
- 添加断点
- 添加条件断点:同上面的编辑断点
- 增加日志输出:
- 减少调试代码,提高代码的整洁性。
- 直接在 面板 添加 控制台输出,调试更加方便。
- 线上的网站也可以直接添加 控制台输出。
结束语:
调试代码的介绍就到此结束了。