Visual Studio 代码调试器不会在 TypeScript (ts) 文件中的断点处停止，而是在 Vue 文件中停止

Question

我遇到一个问题，最近在纯 TypeScript (.ts) 文件中设置断点时，我的 Visual Studio Code 调试器在调试 Vue.js 应用程序时拒绝在断点处停止，而在 Vue 中设置断点时它工作得很好单文件组件 (.vue)。

当前的项目设置是：

• Vue.js (3.4.21) 与 Vite (vitejs/plugin-vue 2.3.4)
• 类星体（2.15.2）
• Visual Studio 代码 (1.88.1)
• Vue 官方语言工具（2.0.12）

启动配置是

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug App in Chrome",
      "url": "http://localhost:9000",
      // To properly reflect changes after HMR with Vite
      "enableContentValidation": false,
      "webRoot": "${workspaceFolder}/src",
      // First start quasar dev in the background through a task
      // See https://stackoverflow.com/a/54017304/448357
      "preLaunchTask": "quasar-dev",
      // Terminate quasar dev when stopping debugging
      // See https://stackoverflow.com/a/60330174/448357
      "postDebugTask": "Terminate All Tasks",
    }
  ]
}

以及相应的tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "quasar-dev",
      "command": "quasar dev",
      "isBackground": true,
      "type": "shell",
      // This task is run before some debug tasks.
      // Problem is, it's a watch script, and since it never exits, VSCode
      // complains. All this is needed so VSCode just lets it run.
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".",
          }
        }
      ]
    },
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

Answer 1

我们找到了罪魁祸首。这是一个 Vite 插件（Sentry），加载在

quasar.config.js

中，如下所示：

const { sentryVitePlugin } = require('@sentry/vite-plugin');

// ...

build: {

  // ...

  extendViteConf(viteConf) {
    viteConf.plugins.push(
       sentryVitePlugin({
          authToken: <SENTRY_AUTH_TOKEN>,
          org: <ORG>,
          project: <PROJECT>,
       }),
     );
  },

  // ...

}

这显然会以某种方式干扰 TS 文件的调试。问题不在于 Visual Studio Code 或 Vue 官方语言工具。

不确定是Vite的问题、Vite的插件机制、Quasar加载插件的问题还是Sentry插件本身的问题，但是更改配置解决了这个问题：

const { sentryVitePlugin } = require('@sentry/vite-plugin');

// ...

build: {

  // ...

  extendViteConf(viteConf) {
    if (process.env.PROD) {
      viteConf.plugins.push(
        sentryVitePlugin({
          authToken: <SENTRY_AUTH_TOKEN>,
          org: <ORG>,
          project: <PROJECT>,
        }),
      );
    }
  },

  // ...

}