Когда я пытаюсь отладить приложение Nuxt. js (код на стороне клиента, а не на стороне сервера) в Chrome, я обнаруживаю, что точки останова не достигаются, когда я ожидаю, что они будут .
в nuxt.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 показывают интерпретированные версии / обновления, я полагаю).
В итоге получается несколько файлов pages/login/index.vue, как вы можете видеть на скриншоте выше. Что делает веб-пакет, и как я могу надежно установить точки останова при отладке клиентской стороны приложений Nuxt. js? Я вижу, что точки останова надежно попадают в хранилище Vuex, но, как правило, пропускаются в pages/ компонентах.
Может быть, я использую неверный тип карты источника для отладки на стороне клиента?