我正在尝试调试我正在用 VSCode 和 Chrome 编写的 Vue 网站。
当我在 data() { return {...} }
中设置断点时函数它会停在上面,但是如果我尝试将它放在 Vue 文件或 JS 服务中的方法中,一旦我通过调试配置启动 Chrome,断点就会变得未绑定(bind)。有没有人对如何保持断点绑定(bind)有任何想法?
这是我的配置文件:
"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 请求
谢谢,
本
最佳答案
https://www.codegrepper.com/code-examples/javascript/vuejs+vscode+unbound+breakpoint
经过一整天的搜索,这解决了我的问题
{
"version": "0.2.0",
"configurations": [
{
"name": "WSL Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
关于vue.js - 在 VScode 和 Chrome 中调试 Vue,未绑定(bind)断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62384636/