[英]Debug Vue.js App with VS Code. Error Unverified Breakpoint
我有以下问题。 我想用 VS Code 和 Chrome 调试我的 Vue.js 项目。 所以我遵循网站指南上的官方指南,但它不起作用。 问题是我总是得到错误:
unverified breakpoint
我错了什么?
这是我的vue.config.js
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
这是我的调试设置:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:/src/*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://💻app/*": "${webRoot}/*"
}
}
]
}
这是我的 package.json
"name": "test-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
当我尝试npm run serve
时,我收到错误消息unverified breakpoint
并且我的断点永远不会被命中。
我使用 vue-cli 3 生成项目。
有人可以帮我吗?
更新
也许路径有问题。 因为当我在 VS Code 的调试器控制台中运行.scripts
时,我得到这样的路径
(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts)
但是没有文件夹webpack:
。 但我不知道他为什么认为有一个文件夹。 他在每个文件中都这样做。
在我的tsconfig.js
中,我已经有了"sourceMap": true
。
更新 2
当我选中复选框All Exceptions
时,VS Code 会显示我的应用程序中的所有异常(它们被捕获)。 但是我的断点仍然不起作用。
更新 3
我的项目看起来像这样
C:\Users\User\Desktop\Vue\route-app
|
-----.vscode
|
-----launch.json
|
-----node_modules
|
----- modules etc.
|
-----public
|
----- index.html
|
----- manifest.json
|
----- favicon.ico
|
-----src
|
----- components
|
----- all my components.vue files
|
----- views
|
----- all my views.vue files (this files are for routing)
|
----- App.vue
|
----- main.ts
|
----- registerServiceWorker.ts
|
----- router.ts
|
----- shims-tsx.d.ts
|
----- shims-vue.d.ts
|
----- store.ts
|
-----.postcssrc.js
|
-----babel.config.js
|
-----package-lock.json
|
-----package.json
|
-----tsconfig.json
|
-----tslint.json
|
-----vue.config.js
此调试适配器不使用与 Chrome 调试适配器相同的语法:删除 url 和路径末尾的 *:
"webpack:///src/": "${webRoot}/"
config vue.config.js
(如果不存在,创建一个)
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
};
配置babel.config.js
module.exports = {
"env":{
"development":{
"sourceMaps":true,
"retainLines":true,
}
},
presets: [
'@vue/app'
]
}
配置launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
},
]
}
参考上述配置后,我可以正常调试.vue
和.js
文件了。(vue-cli3 + vscode)
对我来说,我的 webroot 文件夹设置不正确。
我的 vue 文件浏览器设置为:
D:\Workspace
该项目位于该文件夹中
D:\Workspace\vue_project1
launch.json 中的 webroot 设置必须更改为:
"webRoot": "${workspaceFolder}/vue_project1"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.