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

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

VScode调试

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

2022-06-17-17-19-32.png

启动调试

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

2022-06-17-17-22-22.png

下断点

2022-06-17-17-24-54.png

运行前端

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

2022-06-17-17-25-59.png

调试

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

2022-06-17-17-27-51.png

2022-06-17-17-28-47.png

可以通过悬浮控制台进行按步执行,我是习惯用F9执行
2022-06-17-17-29-05.png

然后监视区的数据就会按程序显示对应的值了,非常适合调试复杂的程序,总比一直log强吧
2022-06-17-17-34-26.png

这些只是基本的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浏览器控制台显示的是这样的

2022-06-17-18-00-06.png

但是开启启用自定义格式设置工具后会发现格式显示更加舒服了
2022-06-17-18-01-44.png

2022-06-17-18-00-49.png

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

2022-06-17-18-02-57.png

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

© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容