chrome下的Vue单步调试

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

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

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

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

image.png

就是这么简单，不知道的都走了不少冤枉路了，与君共享哈。