Debugging in Vue can be quite challenging, especially when it comes to setting breakpoints and stepping through the code. The issue seems to stem from the transpiling of javascript ES6/ES2015/ES2016/ES2017 to ES5. While source maps provide some assistance, the cursor often jumps around erratically during debugging, resorting to frequent console.log usage.
Given that Chrome supports most modern features, my preference would be to minimize or disable transpilation during development.
To achieve this, it appears adding transpileOptions to vue-loader.conf.js is necessary (as shown below):
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
The Vue documentation provides information on transpilerOptions, which ultimately leads users to explore Buble options.
Nevertheless, I find myself uncertain about the next steps. Has anyone effectively disabled significant transpilation for smoother debugging?