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

问题描述

问 题

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

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

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

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

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

这篇关于vue.js - 用了vue-cli的webpack配置后要怎么debug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！