在VS Code和Quasar Vue App中使用断点

Question

我有一个示例测试项目here，我正在使用它来玩这个。

我希望能够做的是设置一个断点：

console.log('in returnArray')

在Index.vue的returnArray函数中，按下播放，并使VS代码停止，这样我就可以使用调试器的功能了。

我能够开始工作的是在函数内部插入'debugger'语句以强制中断调试器，这比console.log（...）调试更好，但不是我想要的上班。

{
    // 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": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true
        }
    ]
}

运行.scripts，我确实看到一些奇怪的东西，这似乎是错误的，但是当我尝试修复它时，'debugger'语句不会导致VS Code在预期的位置停止。

› webpack-internal:///./src/pages/Index.vue (/Users/ericgorr/depot_quasar/quasar_debug/src/pages/Index.vue)
    - webpack:///./src/pages/Index.vue?2483 (/Users/ericgorr/depot_quasar/quasar_debug/src/src/pages/Index.vue)

你可以看到src文件夹的双重提及。这是由

"webRoot": "${workspaceFolder}/src",

在launch.json中，但如果我删除/ src，.scripts中的路径看起来是正确的，但调试器停止按预期工作。

我是否应该能够在VS代码中设置断点并使其停在该行上？如果是这样，我需要对项目进行哪些更改才能使其生效？

Answer 1

单击活动栏中的调试图标以打开调试视图，然后单击齿轮图标以配置launch.json文件，选择Chrome / Firefox：作为环境启动。用相应的配置替换生成的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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

谢谢。