VS Code debugging Typescript - breakpoints hit randomly

I’m having a problem with typescript debugging in VS Code: breakpoints hit randomly. I assume there’s something wrong with source-maps, but can’t figure out what.

It worked as expected up until @quasar/app v1.8.10. But versions 1.9.0 and higher break debugging (including v2.0.0 and v2.0.1 with new quasar.conf.js). I tried no-transpiling, removing IE11 - no luck.

To Reproduce

1. Create project with Quasar CLI:

   1. quasar create .
   2. SCSS
   3. Auto import
   4. All features selected:
   • ESLint (recommended)
   • TypeScript
   • Vuex
   • Axios
   • Vue-i18n
   1. Composition API
   2. ESLint preset: Prettier
   3. Yarn

2. Start quasar: quasar dev

3. Launch Firefox debugging with the following launch.json:

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Firefox",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:8080/",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [
                {
                    "url": "webpack:///src/",
                    "path": "${webRoot}"
                }
            ]
        }
    ]

1. Add breakpoint in CompositionComponent.vue on line 24:

function useClickCount() {
  const clickCount = ref(0);
  function increment() {
    clickCount.value += 1 // line 24
    return clickCount.value; // line 25
  }

  return { clickCount, increment };
}

1. Click on ExampleComponent (in browser)
2. Breakpoint on line 24 is hit - good
3. Press F10 (step over) - debugger goes to line 30 instead of line 25.

It sometimes works as expected when the browser is reloaded, but then it acts up again.

–

Expected behavior Debugger should go line by line.

Platform

VS Code Version: 1.46.1 (user setup) Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d Date: 2020-06-17T21:13:20.174Z Electron: 7.3.1 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.17763

Debugger for Firefox v2.9.0

– @quasar/cli - 1.1.0

package.json (not edited after quasar create):

"scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@vue/composition-api": "^0.6.4",
    "axios": "^0.18.1",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "vue-i18n": "^8.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "@types/node": "^10.17.15",
    "@typescript-eslint/eslint-plugin": "^3.3.0",
    "@typescript-eslint/parser": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-vue": "^6.1.2"
  },
  "browserslist": [
    "ie >= 11",
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }

[webnoob]

Fixed in @quasar/app v2.0.2

[mroes]

Thank you TimTK17 for describing the problem and thank you webnoob and IlCallo for the resolution.