Visual Studio Code Debugger doesn't stop at breakpoint in TypeScript (ts) file but in Vue file

Question

I have a problem that recently my Visual Studio Code debugger refused to stop at breakpoints when debugging my Vue.js application when setting a breakpoint in a plain TypeScript (.ts) file, whereas it works just fine when setting a breakpoint in a Vue Single-File-Component (.vue).

The current project setup is:

• Vue.js (3.4.21) with Vite (vitejs/plugin-vue 2.3.4)
• Quasar (2.15.2)
• Visual Studio Code (1.88.1)
• Vue Official Language tools (2.0.12)

The launch configuration is

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

and the corresponding 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

We've found the culprit. It was a Vite plugin (Sentry), that was loaded in the quasar.config.js like this:

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

// ...

build: {

  // ...

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

  // ...

}

which apparently interferes somehow with debugging TS files. The problem is not Visual Studio Code, or the Vue Official Language tools.

Not sure whether the problem is Vite, Vite's plug-in mechanism, Quasar loading the plugin, or the Sentry plugin itself, but changing the configuration to this fixed the problem:

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>,
        }),
      );
    }
  },

  // ...

}