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

简介

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

组成

接下来我们看下面这张图

source选项卡主要由以上这个区域组成，左侧是你页面加载所需的整个资源。中间部分为源码区域，最右侧就是调试信息了。

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

案例

发现点击按钮无效 接下来我们打开调试器，