chrome sources 文件 source google

简介

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函数

发现确实是返回了字符串，因此修改源码继续测试

发现计算结果正确了，但是为空的时候显示的字符串没出来，继续调试

发现为空判断是根据原始获得的值来判断的继续修改代码如下

至此问题已经解决。

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