Vue3前端开发调试的一些基本技巧

自从前段时间转到 VScode,就没太在意它的调试功能，今天有空学习了下，记录下，另外记录下自己学到的一些调试基本技巧

VScode 调试

以前 VScode 调试都是通过一个插件来 Debugger for Chrome 调试的，但是随着 VScode 的更新， Debugger for Chrome 已成为历史，代替它的是 vscode-js-debug，已经内置在 VScode 里了，所以我们在 package.json 里就能看到它的身影

启动调试

点击 调试 选择启动脚本 dev 然后我们的服务就启动了

下断点

运行前端

使用 Ctrl+鼠标左键 打开调试页面，即可监听到调试内容

调试

可以看到所有断点页面的数值，太多也不好看，右键可以添加监视区

可以通过悬浮控制台进行按步执行，我是习惯用 F9 执行

然后监视区的数据就会按程序显示对应的值了，非常适合调试复杂的程序，总比一直 log 强吧

这些只是基本的 VScode 调试，复杂的慢慢来。

Chrome 开发者调试

Vue3 很多人不知道的一个功能，就是格式化显示 console.log 的内容比如

const num = ref(123);
const str = ref("Rakers");
const obj = reactive({ num: 123, str: "Rakers" });
console.log(num);
console.log(str);
console.log(obj);

正常情况下执行后在 Chrome 浏览器控制台显示的是这样的

但是开启 启用自定义格式设置工具 后会发现格式显示更加舒服了

对其右键就可以显示原本格式了

这样就突出显示了我们需要的部分，更加符合我们想看到的 value 值