Debugging NativeScript-Vue using vue-cli-template


#1

I’m trying to debug a fresh install of the “vue-cli-template” prepared according to the documentation

I run:
npm run debug:android

It loads fine, I follow the link from the output:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

In the “Sources” section of DevTools I can only view the code compiled by Webpack. Of course I would like to be able to set breakpoints in the original code, but It is not available.

How should I configure the Webpack to be able to work with DevTools on the original code?


#2

I went to the same problem as you.

Just add this to your webpack file:

const command = launchArgs.split(' ')[0];
const isDebug = command !== 'build';

and this conditional surrounding the uglify:

  if (!isDebug) {
    // Minify JavaScript code
    plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {warnings: false},
        output: {comments: false},
    }))
  }

Hope that helps.


#3

Thank you for your reply. I already have these two fragments in my default webpack.config.js included in the template. I doesn’t work though.

Can you tell me where exactly you can see the uncompressed code in Chrome?

UPDATE 2018-09-02:
Taking some time off always helps :slight_smile: The problem was a wrong value of the “devtool” option in webpack.config.js

I used “source-map”, as recommended in Vue.js documentation. I changed it to “eval-source-map” after reading Webpack documentation. It works like a charm.