Невозможно установить точку останова в. vue файле с помощью метода asyn c

Question

У меня проблемы с отладкой моего приложения Vue, в котором пошаговое выполнение может пропускать строки или невозможно установить точки останова на допустимой строке.

Я полагаю, что это проблема с исходной картой, но я не уверен, с чего начать копать. Вероятно, один из Vue -loader, Webpack или Babel.

Протестировано с:

vue: 2.6.10

vue -cli 4.1 .2

Проблема может быть воспроизведена следующим образом:

создать новый Vue проект:

vue создать тест

Просто используйте значения по умолчанию

cd test

npm run serve

Замените HelloWorld. vue на:

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

Откройте devtools в Chrome, нажмите кнопку сохранения и попробуйте поставить точку останова на строку:

if (valid) {

В моем тесте точка останова не установлена.

Если я удаляю asyn c из метода сохранения, можно установить точку останова.

протестирован с Chrome 79 и Firefox 73.

I Также вы поиграли с различными настройками devtool в vue .config. js безуспешно, например:

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

Есть идеи?

С уважением

Боб

Answer 1

Не знаю, почему это не работает в данном конкретном случае c, но в качестве крайней меры вы можете добавить строку debugger; до того, как if... - это создаст любой DevTools (по крайней мере, любой текущий , в том числе IE11) останавливаться на достигнутом. Ваш код будет выглядеть примерно так:

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