使用 VS Code 调试 Vue.js 应用程序。错误未验证断点

Posted 2023-02-22

【中文标题】使用 VS Code 调试 Vue.js 应用程序。错误未验证断点

【英文标题】：Debug Vue.js App with VS Code. Error Unverified Breakpoint

【发布时间】：2019-01-15 10:24:49

【问题描述】：

我有以下问题。我想用 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
|
-----.postcs-s-rc.js
|
-----babel.config.js
|
-----package-lock.json
|
-----package.json
|
-----tsconfig.json
|
-----tslint.json
|
-----vue.config.js

【问题讨论】：

我假设serve 已经是正确的脚本，看起来你只需要add a breakpoint

@LarsBeck 我在不同的位置设置了许多不同的断点。他们没有一个工作。我一步一步按照官网的指南进行操作。

好吧，忘记我的想法，祝你好运;-)

@LarsBeck 对不起，我不想冒犯你或粗鲁！

你既没有冒犯我，也没有粗鲁！看来你误会了:-)

【参考方案1】：

configvue.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)

【讨论】：

巴别塔对我来说是个问题。它会从正确的断点开始，然后跳来跳去。非常感谢

【参考方案2】：

此调试适配器与 Chrome 调试适配器使用的语法不同：删除 url 和路径末尾的 *：

"webpack:///src/": "$webRoot/"

【讨论】：

看起来这种调试方式存在很大问题github.com/vuejs/vue-loader/issues/1163

你拯救我的一周@Saeed

【参考方案3】：

对我来说，我的 webroot 文件夹设置不正确。

我的 vue 文件浏览器设置为：

D:\Workspace

项目位于该文件夹中

D:\Workspace\vue_project1

launch.json 中的 webroot 设置必须更改为：

"webRoot": "$workspaceFolder/vue_project1"