Source调试JS代码
理解单步调试，单步进入块，单步退出块的区别
- 单步调试
- F10 跳过当前函数调用
- 单步进入块
- F11 进入当前函数调用
- 单步退出块
- Shift + F11 退出当前函数调用
编辑CSS/JS
- Click on the “Sources” panel.
- Then, click on the “Filesystem” panel.
- Finally, click on “Add folder to workspace.”
- Chrome will open a window to let you choose the directory with the sourcefiles.
快速进入调试方法
[图片上传失败...(image-f3e4b3-1556554307580)]
注意：调试时，可以在具体方法前临时添加断点，然后按F11进入方法体内，或者按F10跳过当前方法移动到下一个打上断点的方法之前，如图36行位置
重新执行方法
[图片上传失败...(image-8eb87d-1556554307580)]
- 点击
Source右侧Call Stack，选中想要从新执行的方法（这里我想重新执行success），右键点击Restart frame，然后点击step即可回到success起始位置
调试功能区域
- Call Stack：方法调用栈
- Scope：全局变量，局部变量等
- Breakpoints：显示当前JS代码中所有断点
- XHR Breakpoints：
- 点击右侧的+号，可以添加请求的URL，一旦 XHR 调用触发时就会在 request.send() 的地方中断
- DOM Breakpoints
- 监听和查看某个元素的变化情况
- TODO 测试
- Event listener Breakpoints
- 勾选对应的事件类型，当触发了该类型的事件的 JS代码 时就会自动中断
- 举例：选中
Mouse - click之后，那么触发了鼠标点击时事件之后，就会在对应的代码处停下
使用Source - Sinppets
- 好处：在项目环境页面内，该片段可执行项目内的方法
- 浏览器会保存Sinppets
