Electron + Vue跨平台应用（十八）基础技法（十）调试

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
Electron + Vue跨平台应用（六）效果还不错的登录页面
Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）
Electron + Vue跨平台应用（九）基础技法（四）
Electron + Vue跨平台应用（十）可视化（一）
Electron + Vue跨平台应用（十一）可视化（二）
Electron + Vue跨平台应用（十二）可视化（三）
Electron + Vue跨平台应用（十三）基础技法（五）
Electron + Vue跨平台应用（十四）基础技法（六）
Electron + Vue跨平台应用（十五）基础技法（七）
Electron + Vue跨平台应用（十六）基础技法（八）Nginx配置https并部署Vue
Electron + Vue跨平台应用（十七）基础技法（九）Auth2.0认证在Vue中的使用: SpringCloud的统一鉴权的接入

1: 如何线上调试
2: 调试快捷键说明-source面板
3: 切换PC/移动设备进行页面检查
4: 网络面板
5: 实时修改变量的值

1: 如何线上调试

1. 打开调试面板 F12,在调试面板中，你可以看到如下页面
   
   其中js就是通过vuecli打包后生成的问题，其中数组2指的是引入第三库的代码，而数字1指的是当前页面被打包后生成的代码。每一个chunk-xxxx.js文件可以理解为将一个大文件拆分出来的一部分代码，拆分成小的就为了提高浏览器加载速度的

2. 双击数字1的文件，并双击格式化按钮
   

此时该页面代码就会被格式化

3. 找到问题触发问题，假设bug出现在调用save方法时，我们右击添加断点
   
4. 最后我们点击页面上的按钮，就可以进行调试模式，后面就是通过F10，F9的调试按钮进行调试操作了
   

2: 调试快捷键说明-source面板

基本的调试面板如上：

1. (F8), 暂停/继续调试模式
2. (F10），执行下一行代码, 遇到方法，一步执行完，无法看到方法的执行情况
3. (F11) ,一步一步执行，遇到方法，进入到方法内部，可以查看方法的具体执行情况
4. (shift + f11), 跳出当前函数，返回上一步执行的位置
5. (F9)不知道是啥意思
6. 断点开关：是所有断点失效/生效，如果是灰黑色，则表明断点生效，即程序会在断点处断开； 反之如果是亮蓝色则表示断点无效，程序不会在断点处断开
   
7. 异常中断开关： 处于激活状态时，一旦发生异常，程序就会在异常发生处中断
   

在sourec面板中，还有一个调用堆栈区域，表示当前函数的调用堆栈，如下图表示程序正在执行的函数是validateAdvanceMode，其调用函数为save，我们可以通过右击save这个调用栈，让程序重新回到save方法处

3: 切换PC/移动设备进行页面检查

点击此处进行PC/移动设备的UI检查

4: 网络面板

5: 实时修改变量的值

假设我们想修改这里的this.isDebugging的值为true
只需要在执行到这里的时候，在watch里面添加监控表达式即可，在表达式中修改isDebugging为true