Vue工程化如何断点调试?

代码去哪里了?

以往的经验呢,想要调试我们写的js代码,会按F12 找到 Soursces 标签,找到自己写的代码,设置上断点即可。

但是用工程化的方式做的项目,开发模式下看到的却是这个样子的,这个我写的代码去哪里了?


013以往经验.png

代码走丢了,上面的js文件全是看不懂的代码,不要急,代码没丢,只是搬家了。

代码在下面

一次偶然的机会才发现原来代码躲在了这里,害得我用了好久的console。


012js位置.png

文件结构和我们写的代码是一毛一样的,终于找到了,只是这么多双胞胎呢?那个是真的呢?都点一下就知道了。

设置断点

找到了代码,下一步就是设置断点了,试一试,果然还用。


010断点调试.png

鼠标放在上面也可以查看变量情况,只是截图没截下来。

看看node对象到底有啥。

在下面的地方之间写对象名,就可以看到内容。


011查看数据.png

果然好复杂,看不懂。

这下终于可以不用写console.log了。

推荐阅读更多精彩内容