用了vue-cli的webpack配置后要怎么debug

我以前用的是我自己的webpack多页脚手架(Array-Huang/webpack-seed),最近开始用vue-cli的webpack模板,发现了一个问题:我感觉报的错老是被“吃掉”了,也不知道是被vue吃掉了还是被webpack某个plugin吃掉了,看console里的报错完全看不出来是哪里的问题:

图片描述

我之前用自己的webpack脚手架来写vue都能报出来是具体哪一行出的错,然后出的什么错,怎么换了用vue-cli的模板就不行了呢?

我在猜测这到底是哪个webpack配置的问题呢?还是说我现在改成单页模式以后,代码都是异步加载(require.ensure())的缘故?

阅读 18.1k
2 个回答

使用 SourceMap 断点调试
1.修改 /build/webpack.dev.conf.js 文件中的 devtool#eval-source-map 否则会导致调试时行号不对
2.在可能出错的代码块部分写上 debugger 打开调试器后执行到这段代码时会自动进入断点调试

export default {
  created() {
    const href = window.location.href
    debugger // 代码运行到此处会中断
    console.log(href)
  },
}
推荐问题
宣传栏