使用 Chrome 开发者控制台调试 Nuxt.js 应用程序（客户端）

Question

当我尝试在 Chrome 中调试 Nuxt.js 应用程序（客户端代码，而不是服务器端）时，我发现断点没有在我期望的时候被命中。

在nuxt.config.js我有以下 webpack 配置：

extend (config, ctx) {
  if (ctx.isDev) {
    config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
  }
}

在组件 ( login/index.vue) 中，我有以下方法：

methods: {
    login() {
        // in the chrome developer console I can see that this logs, but setting a breakpoint on the below line,
        // it tends to not always stop/"break" at this point
        console.log("at login/index.vue")
        this.$store.dispatch('login',
            this.credentials
        ).then(response => {
            console.log(response)
            this.$router.push({
                name: 'index'
            })
        }).catch(e => {
            console.log(e.message)
        })
    }
}

我猜这与 webpack 加载文件的方式有关。在 Chrome 开发者控制台中，我可以看到：

我尝试在其中设置断点，webpack://pages/login/index.vue因为这是显示开发样式代码的唯一文件（其余文件，例如index.vue?56ff我想显示的是解释版本/更新）。

pages/login/index.vue正如您在上面的屏幕截图中看到的那样，最终会有多个文件。webpack 在做什么，以及如何在调试 Nuxt.js 应用程序的客户端时可靠地设置断点？我可以看到断点在 Vuex 存储中被可靠地命中，但在pages/组件中往往会被跳过。

也许我在客户端调试中使用了错误类型的源映射？