谷歌调试器------Source

简介

Source选项卡,该说不说意味着你的头发量,会使用的人赚的钱可以买自己喜欢的东西,不会的人,只能用来去植发了😂
该项选卡可以帮助你快速定位问题,观察程序运行的情况

组成

接下来我们看下面这张图
在这里插入图片描述
source选项卡主要由以上这个区域组成,左侧是你页面加载所需的整个资源。中间部分为源码区域,最右侧就是调试信息了。

  1. 源码区域
    • 最左侧的序号部分,每一个序号都可以点击,点击时会在这一行加一个断点信息,再次点击时,就会取消改行的断点。
    • 断点:就是当代码运行到该行时,则会停止运行,需要你进行操作才继续执行。
  2. 调试信息区域
    • breakpoints这个选项显示源码区域打断点的信息
    • Scope 区域 ,这个区域包含当前所有可用的局部变量,全局变量以及闭包的变量,并且实时更新。
    • Watch 学过vue的小伙伴,应该很容易理解,就是一个监听器,监听你想看的值或者是表达式,并且是实时更新的
    • 其他几个区域小编还没怎没用过。

案例

在这里插入图片描述
发现点击按钮无效 接下来我们打开调试器,
在这里插入图片描述
然后我们选中的这个按钮元素,找到他的点击事件,点进去代码所在位置如下图
在这里插入图片描述
在20行打个断点。当然还有其它进来源码的操作,比如你在console选项卡有个报错信息,点击报错信息也会进入源码位置,再比如你在本地代码中在某一行输入了debugger,当程序运行到这时也会进如源码。

接下来 咱们继续。我们再次点击一下按钮
在这里插入图片描述
我们发现代码已经停在这一行了
接下来我来讲解一下图中圈起来的按钮是什么意思:

  1. 一直运行,直到遇到下一个断点 (Resume)
  2. 执行完该行代码,跳到下一行代码 (stepOver)
  3. 进入函数内(stepInto)
  4. 执行该函数并返回到上一次调用处(stepOut)

接下来我们一步一步看调试结果在这里插入图片描述
发现用的isEmpty 是个引用,该引用指向一个函数,但是一直没有调用,因此一直判断为true
然后对源代码进行修改 然后保存 crtl + s,在进行调试
在这里插入图片描述
发现还是返回ture 于是我们定位在 isEmpty()函数的问题
在这里插入图片描述
然后发现原来是isEmpty()函数返回值写反了,进行如下修改在测试
在这里插入图片描述
发现结果还有问题,于是我们继续测试,并监听结果值
在这里插入图片描述
发现结果值是字符串相加,于是我们得查看getNumber函数
在这里插入图片描述
发现确实是返回了字符串,因此修改源码继续测试
在这里插入图片描述
发现计算结果正确了,但是为空的时候显示的字符串没出来,继续调试
在这里插入图片描述
发现为空判断是根据原始获得的值来判断的继续修改代码如下
在这里插入图片描述
至此问题已经解决。

小编说的都是一些基础用法,等大家用多了,就能快速的定位代码了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值