Question

在.vscode \ launch.json中具有以下设置

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
}

我可以在项目的index.js文件中设置一个断点，并且触发成功，但是* .vue文件中的断点触发不正确。

具有以下设置：

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

反之亦然，*。vue文件中的断点已成功触发，但是我无法在index.js文件中设置断点。

如何使断点在* .js和* .vue中都能工作？

有关how I set up the environment的更多详细信息。

Answer 1

我很惊讶，但是添加两个版本的源地图覆盖对我来说很有效。现在，我可以在.vue文件，.js文件和导入的es6模块中的断点处进行设置并使其停止。我只花了大约一个月的时间就找到了解决方案！

希望它对您有用。

      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///src/*": "${webRoot}/*"
      }

Answer 2

以下是2020年9月在vsCode 1.49.1中为我工作的内容：与上述史蒂夫的答案非常相似：

     "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/src/*",
            "webpack:///./src/*.js": "${webRoot}/src/*.js",
         }

带有Vue.js的VS Code中Chrome的调试器设置

2 个答案: