CODEWITHSUNDEEP
javascriptdebuggingvue.jswebpackgoogle-chrome-devtools
RoccoB
RoccoB

Reputation: 2579

Disabling Transpiler in Vue Webpack for Easier Debugging

It is really hard to set breakpoints and step through code in Vue. I think this is because of the transpiling of javascript ES6/ES2015/ES2016/ES2017 to ES5. The source maps are mildly useful, but often when I "step" through, the cursor jumps around, leading me back to console.log debugging.

Since Chrome supports most of the latest features, I'd like to disable most or all transpiling for development.

I think what I need to do is add transpileOptions to vue-loader.conf.js (shown here):

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
  })
}

Here are the Vue docs on transpilerOptions. The doc basically punts, and says, hey, refer to the Buble options.

I'm not sure how to proceed. Has anybody successfully disabled most transpiling for easier debugging?

Upvotes: 3

Views: 478

Answers (1)

bernie
bernie

Reputation: 10400

I use Babel instead of Bublé for transpiling and I don't know much about Bublé so I hope this can help... What I did to make debugging easier is temporarily modify the browserslist in my package.json to support only the latest Chrome with "last 1 chrome version". This removes most transpiling and polyfills from the build so it's easier to follow.

I'm guessing there is some sort of mechanism to specify which browsers you target and therefore what to polyfill in your setup as well. Give that a try and see if things are easier to debug.

Upvotes: 2

Related Questions