Vue.js 在VScode和Chrome中调试Vue，未绑定断点

我正在尝试调试一个用VSCode和Chrome编写的Vue网站。 当我在

data（）{return{…}}

函数中放置断点时，它会停止，但如果我尝试将其放置在Vue文件或JS服务的方法中，一旦我通过调试配置启动Chrome，断点就会解除绑定。有人知道如何保持断点的绑定吗？ 这是我的配置文件：

"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>/**"
            ]
        }

    ]
}

我还尝试调试我的服务：

login(credentials) {
        return Api().post('/login', credentials)
    }

Api对象只是创建Axios请求

谢谢

---

Ben

好吧，这并不是一个真正的答案，但我已经重新启动了我的节点服务器好几次（更多次），现在它停止在breakpiont。我希望问题不会再出现。由于某种原因，他没有显示变量的值，但我想这是另一个问题

谢谢你的帮助：）

---

Ben

当我在VSCode中有未绑定的断点时，我需要使用

--inspect

或

--debug brk=5858

标志启动进程。除此之外，

launch.json

给我带来了很多麻烦，这些资源帮助了我

launch.json示例：

    {
        "type": "node",
        "request": "attach",
        "name": "Node: Nodemon",
        "processId": "${command:PickProcess}",
        "restart": true,
        "protocol": "inspector",
    },
    {
        "name": "Launch tests via NPM",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
            "run-script", "testDebug"
        ],
        "port": 5858
    }

package.json

"scripts": {
  "start": "NODE_PATH=./src DEBUG=express:* NODE_ENV=dev nodemon -w src --ext ts --exec node --inspect -r tsconfig-paths/register -r ts-node/register src/index.ts",
  "testDebug": "NODE_ENV=test ts-mocha --debug-brk=5858 --paths -p tsconfig.json",
 }

}，

经过一整天的搜索，这个问题解决了

{
"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}/*"
    }
  }
]

---

}

您可以添加代码示例，说明您试图添加断点的位置吗？我已经编辑了原始帖子如果您选择“附加到进程”而不是“程序”，该怎么办？在我的例子中，我现在可以设置断点。如果您有问题，请告诉我是否有帮助。

{
"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}/*"
    }
  }
]