Cannot set breakpoint in .vue file with async method

Question

I'm having issues debugging my Vue app in that stepping can skip lines or breakpoints cannot be set on a valid line.

I guess it's a sourcemap issue but not sure where to start digging. Likely one of Vue-loader, Webpack or Babel.

Tested with:

vue: 2.6.10

vue-cli 4.1.2

The issue can be reproduced as follows:

create new Vue project:

vue create test

Just use the defaults

cd test

npm run serve

Replace HelloWorld.vue with:

<template>
  <button @click="save()">
    Save
  </button>

</template>

<script>
export default {

  methods: {

    async save() {
      debugger;
      let valid = false;
      if (valid) {
        return;
      } else {
        console.log("Hi")
      }
    }
  }
}
</script>

Open devtools in Chrome, hit the save button and try put breakpoint on the line:

if (valid) {

In my test the breakpoint isn't set.

If I remove async from the save method, the breakpoint can be set.

tested with Chrome 79 and Firefox 73.

I've also played around with various devtool settings in vue.config.js without success eg:

devtool = 'cheap-module-eval-sourcemap' 
devtool = 'cheap-eval-source-map' 
devtool = 'source-map'

Any ideas?

Kind regards

Bob

Answer 1

No idea why it does not work in this specific case, but as a means of last resort, you can add a line debugger; before if... - is will make any DevTools (at least any current one, incl. IE11) stop there. You code would then look something like this:

      // ...
      debugger;
      if (valid) {
        // ...

Answer 2

This is likely because of the Babel polyfills Vue CLI is configured to use by default which generated source maps don't seem to work well with.

Specifically this polyfill for async methods will cause issues with debugging: https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator

You can avoid these polyfills by adding this in your .browserslistrc

[development]
last 1 chrome version
last 1 firefox version

The @vue/babel-preset-app Babel preset automatically determines which polyfills to use based on which browsers you are targeting in .browserslistrc. So to disable the problematic polyfill we target only browsers that natively support async/await in development (eg: the latest versions of Chrome and Firefox).