我有以下问题。我想用 VS Code 和 Chrome 调试我的 Vue.js 项目。所以我按照网站上的官方指南Guide但它不起作用。问题是我总是得到错误:
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}/"
关于javascript - 使用 VS 代码调试 Vue.js 应用程序。错误未验证断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51741859/