无法使用异步方法在 .vue 文件中设置断点

Question

我在调试 Vue 应用程序时遇到问题，因为步进可以跳过行或无法在有效行上设置断点。

我想这是一个 sourcemap 问题，但不确定从哪里开始挖掘。可能是 Vue-loader、Webpack 或 Babel 之一。

测试：

视图：2.6.10

vue-cli 4.1.2

该问题可以重现如下：

创建新的 Vue 项目：

vue 创建测试

只需使用默认值

光盘测试

npm 运行服务

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

在 Chrome 中打开 devtools，点击保存按钮并尝试在行上放置断点：

if (valid) {

在我的测试中，断点没有设置。

如果我从 save 方法中删除async，则可以设置断点。

使用 Chrome 79 和 Firefox 73 进行测试。

我还在 vue.config.js 中尝试了各种 devtool 设置，但没有成功，例如：

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

有任何想法吗？

亲切的问候

鲍勃

Answer 1

不知道为什么它在这种特定情况下不起作用，但作为最后的手段，您可以在- isdebugger;之前添加一行if...，这将使任何 DevTools（至少是任何当前的工具，包括 IE11）停止在那里。您的代码将如下所示：

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