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

Question

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

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

测试：

vue: 2.6.10

vue-cli 4.1.2

问题可以重现如下：

创建新的 Vue 项目：

vue 创建测试

只使用默认值

cd 测试

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

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

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

Answer 2

这可能是因为 Babel polyfills Vue CLI 被配置为默认使用生成的源映射似乎不能很好地使用。

具体来说，这个用于异步方法的 polyfill 会导致调试问题： https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator

你可以通过在你的 .browserslistrc 中添加这些来避免这些 polyfills

[development]
last 1 chrome version
last 1 firefox version

@vue/babel-preset-app Babel 预设会根据您在 .browserslistrc 中定位的浏览器自动确定要使用的 polyfill。因此，为了禁用有问题的 polyfill，我们只针对开发中原生支持 async/await 的浏览器（例如：最新版本的 Chrome 和 Firefox）。