我正在尝试调试我在 VSCode 和 Chrome 中编写的 Vue 网站。当我在 data() { return {...} }
函数中放置一个断点时,它会停在它上面,但是如果我尝试将它放在 Vue 文件或 JS 服务的方法中,一旦我通过调试配置启动 Chrome,断点就会变成未绑定。有没有人对如何保持断点有任何想法?这是我的配置文件:
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client/meet-for-lunch/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "node",
"request": "launch",
"name": "Debug server",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/server/bin/www",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"skipFiles": [
"<node_internals>/**"
]
}
]
}
我包括服务器的调试配置,因为在工作中。
这是我尝试调试的方法示例(来自 Vue 文件),我在 this.error = null
处设置了一个断点。该方法运行正常,所以我希望它在断点处停止:
methods: {
async login() {
try {
this.error = null;
const response = await AuthenticationService.login({
email: this.email,
password: this.password
})
this.$store.dispatch('setToken', response.data.token)
this.$store.dispatch('setUser', response.data.user)
}
catch (err) {
console.log(`An error has occured: ${JSON.stringify(err.response)}`)
this.error = err.response.data.error
}
}
}
我也在尝试调试我的服务:
login(credentials) {
return Api().post('/login', credentials)
}
Api 对象只是创建 Axios 请求
谢谢,
本
原文由 Bwal 发布,翻译遵循 CC BY-SA 4.0 许可协议
当我在 VSCode 中使用未绑定断点时,我最终需要使用
--inspect
或--debug-brk=5858
标志启动进程。除此之外,launch.json
给我带来了很多麻烦,这些资源帮助了我launch.json 示例:
包.json
},