在 vs 代码中调试 node/prime vue webapp 没有遇到断点

Question

我有一个 node/prime vue 应用程序，我想对其进行调试。在 launch.json 我有

"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }

我在 VS Code

中使用 npm run serve 启动我的应用程序

然后我点击 debug/play 图标进行上述配置。

当我在应用程序中遇到错误时，控制台错误出现在 VS Code 的调试控制台中。

但是没有命中断点。既不在 .ts 文件中，也不在 .js 文件中，也不在 .vue 文件中。它们都显示为“未绑定断点”

我已经安装了 调试器 Chrome VS Code 扩展和 Vetur Vue 工具

我也跟着这个linkhttps://vuejs.org/v2/cookbook/debugging-in-vscode.html然后放

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

变成vue.config.js

=> 如何绑定断点？

Answer 1

正在添加

configureWebpack: {
    devtool: 'source-map'
}

到vue.config.js

并在 Chrome 中设置断点产生了不同。

在 vs 代码中调试 node/prime vue webapp 没有遇到断点

Debugging node/prime vue webapp in vs code not hitting break points

debugging

node.js

vue.js

visual-studio-code

primevue