Adding breakpoints in Typescript and VueJS code with the Chrome Debugger

Question

I use Typescript to develop an app with Vue.Js framework. It is built with Vite. I cannot add the break points on every lines. Sometimes, when the breakpoints stops the execution, the Javascript breakpoint does not correspond to the Typescript source. For the moment, the only way to get some values is to add some console.debug commands. Is there any way to debug more easily ?

The Tsconfig.json contains the following code:

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "esnext",
    "target": "esnext",
    "lib": ["dom", "esnext"],
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "incremental": false,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noUnusedLocals": false,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "vue/ref-macros",
      "vite/client",
      "vite-plugin-pages/client",
      "vite-plugin-vue-layouts/client",
      "node",
      "unplugin-icons/types/vue"
    ],
    "paths": {
      "~/*": ["src/*"]
    },
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts"
  ]
}

So it generates Javascript source maps. It generates Javascript source maps. In the chrome developper tools (F12), I have checked the "Enable Javascript source maps" box. I have also checked the "Allow DevTools to load resources such as source maps, from remot file path" box.