代码调试
chrome 调试
快捷键
| 快捷键 | 描述 |
|---|---|
| F12 | 打开开发者工具 |
| F5 | 刷新页面 |
| F8 | 继续 |
| F10 | step over 单步跳过 |
| F11 | step into 单步执行 |
| Shift + F11 | step out 单步跳出 |
调试技巧
- 选中 Element,需要在控制台查看其属性
console.dir($0) - 在控制台验证连续方法调用时，引用上一个方法的结果值
$\_ - vue 项目，推荐 Vue.js devtools 插件调试，也可通过 this.xxx 方式观察 data 数据
vscode 调试
快捷键
| 快捷键 | 描述 |
|---|---|
| F5 | 启动调试/继续 |
| Ctrl + F5 | 以非调试模式运行 |
| Shift + F5 | stop 停止 |
| Ctrl+ Shift + F5 | reStart 重启 |
| F9 | 在光标位置添加/移除断点 |
| F10 | step over 单步跳过 |
| F11 | step into 单步执行 |
| Shift + F11 | step out 单步跳出 |
调试方法
vscode 调试需要先配置并选择合适的启动调试方式，针对vue cli 项目处理调试配置后，需要先在控制台启动运行，然后在需要调试的地方 打断点/写上 debugger,并操作视图至指定页面逻辑，就会触发调试，追踪 data 值，需要 this.xxx 的形式添加 watch,也可以在变量中筛选并添加至 watch
Code Runner
针对在 html/vue/js 文件中的 js 语句，都可以先选中，然后右键执行
| 快捷键 | 描述 |
|---|---|
| Ctrl + Alt + N | 运行代码 |
利用 node 执行 js 代码
在 vscode 终端输入 node 文件名，会直接执行；若仅输入 node 回车，则会进入 REPL 模式（爽翻天）
node D:\git\xkb-cli\src\hybrid\vue-demo\js\debugger.js
