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值