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

Question

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

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

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

Answer 1

使用 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)
  },
}

Answer 2

可以参考这个