自从前段时间转到VScode,就没太在意它的调试功能,今天有空学习了下,记录下,另外记录下自己学到的一些调试基本技巧
以前VScode调试都是通过一个插件来Debugger for Chrome调试的,但是随着VScode的更新,Debugger for Chrome已成为历史,代替它的是vscode-js-debug,已经内置在VScode里了,所以我们在package.json里就能看到它的身影
点击调试 选择启动脚本dev然后我们的服务就启动了
下断点
使用Ctrl+鼠标左键打开调试页面,即可监听到调试内容
可以看到所有断点页面的数值,太多也不好看,右键可以添加监视区
可以通过悬浮控制台进行按步执行,我是习惯用F9执行
然后监视区的数据就会按程序显示对应的值了,非常适合调试复杂的程序,总比一直log强吧
这些只是基本的VScode调试,复杂的慢慢来。
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值
版权声明:本文为「诚哥博客」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://www.chengzz.com/504.html
页面更新:2024-05-11
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号