chrome下的Vue单步调试

一直觉得vue的单步调试很费劲,webpack编译后的代码让人难以捉摸,因为平时使用vs code开发环境,网上找了各种关于vs code单步调试vue的文章做了各种尝试都没成功,断点永远都进不去,断点处一直显示 已设置断点但还未绑定。没找到问题所在,有知道大神们的期待告知哦。

使用vue-devtools插件的就不说了哈,也是一个调试的好工具,大家自行百度哦

后来找到一个可以用的方法就是在断点处加debugger,这样就是进入断点进行调试了,但是这样做的缺点也显而易见,调试结束还得一一删除,甚是不便。

倒腾到最后才发现现在chrome已经支持webpack的调试了,不需要做任何操作就能和以前一样使用chrome的调试器来调试vue。
在source的webpack://节点下,直接就是源文件了,在源文件中直接下断点就可以了!!

chrome下的Vue单步调试