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

当我试图在Chrome中调试Nuxt.js应用程序（客户端代码，而不是服务器端）时，我发现断点并没有在我预期的情况下被击中

在

numxt.config.js

中，我有以下网页配置：

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这样的其余文件都显示了解释版本/更新）

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

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