如何使用谷歌调试源码?

194 阅读2分钟

「我正在参与掘金会员专属活动-源码共读第一期,点击参与

本篇文章讲的是如何调试源码?

有的时候我们平时开发过程中,也会常常用到调试。以此来看我们的代码和自己心中的预期是不是一致。除了开发之外,我们阅读Vue.jsReact等官方库都需要调试代码,了解代码的执行顺序,方便我们更好的理解代码逻辑。

通常我们调试源码最方便的就是谷歌浏览器自带的调试工具。

image.png 首先F12打开source面板,我们看到图片上红框部分,依次讲解。

image.png 这个表示继续脚本执行(执行到下个断点或结束)

image.png这个表示暂停脚本执行

image.png这个表示执行到下个函数前面

image.png这两个是一对,前者是进入函数执行到,后者是执行函数剩余代码然后退出

image.png 这个是开关,激活时脚本会执行到断点停止,停止时,断点不会被识别直接跳过断点,继续执行脚本。

image.png 这个表示在有异常之前暂停脚本执行。

当激活断点鼠标右键点击时,我们可以做几个操作:

image.png

  1. 移除断点
  2. 编辑断点:与此同时可修改当前断点为条件断点,需要添加条件代码片段用于判断当前断点是否需要中断
  3. 禁用断点:这个和前面的断点开关是同样的效果,一个是局部的一个是全局的
  4. 添加脚本到忽略列表:项目中例如引用了jquery.min.js之类的库文件,我们调试的时候并不需要关心,那么可以将此类脚本文件右键选择添加到“黑盒脚本”中,那么在debug单步调试时,就不会进入到此类库文件中,减少了调试步骤。

当空白鼠标右键点击时:

image.png

  1. 添加断点
  2. 添加条件断点:同上面的编辑断点
  3. 增加日志输出:
    1. 减少调试代码,提高代码的整洁性。
    2. 直接在 面板 添加 控制台输出,调试更加方便。
    3. 线上的网站也可以直接添加 控制台输出

结束语:

调试代码的介绍就到此结束了。