Unable to debug .vue files

[catalintoma]

I set a breakpoint in .vue class components and they are not hit. When I force a debugger statement it does hit, but it's not in the original file (it has a ?1234 appended at the end).

I followed this debug setup for VS Code + quasar app: https://quasar.dev/start/vs-code-configuration

I first saw this after upgrading my 1.6 project, but in the meantime created a new project with the starter kit and it's still hapenning.

To Reproduce Steps to reproduce the behavior:

1. Create new project
2. Configure VS code launch.json to start chrome in debug
3. Add devtool: 'source-map' to quasar conf -> build
4. Breakpoint in vue component

Expected behavior Breakpoint hits

Screenshots

OS: Windows Node: 12. 15 NPM: 6.13 Yarn: Da Browser

[hawkeye64]

@catalintoma

When I force a debugger statement it does hit, but it's not in the original file (it has a ?1234 appended at the end).

When running quasar dev each time you make a change to the source, the HMR (hot module reload) has to push the update to the browser. The name has to be different in some way because the browser doesn't unload unwanted files. That's why the breakpoint hit in a different file, not the original). To get back to the original name, just refresh with F5. But, next time youi make a change, it will repeat the process.

[catalintoma]

@hawkeye64 I know why it does that cache busting part, but this worked perfectly in quasar v1.6! There must be a way to say all should go to original file, but I have no webpack experience

One more important detail I forgot is that this does not happen for .ts files (eg. vuex modules)

[catalintoma]

I initially tought all are different version of the same original file,but they are somehow split,for example: webpack:///./src/components/login.vue?e7ec contains only a render() function webpack:///./src/components/login.vue?8f9d the typescript code (mounted event, etc)

[pdanpdan]

Have you checked all the points here: https://vuejs.org/v2/cookbook/debugging-in-vscode.html ?

[pdanpdan]

I'll reopen if more details are added

[catalintoma]

Sorry, was Christmasing, yes I read that guide, in quasar.conf.js I have the devtool set to "source-map" and the vs code launch.json is exactly as in the guide.

It still works as expected for .ts files, I've only seen the issue with .vue files.

In Quasar 1.6 it worked, so I assume some loader \ devtool package was updated.

[charlieknoll]

I had a tough time getting breakpoints to work in vue files. It seems to be working with this configuration. I update the url to match the current page I'm testing. I have added a services and boot folder to my project.

    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "url": "http://localhost:8080/#/settings",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/services/*": "${webRoot}/services/*",
        "webpack:///./src/boot/*": "${webRoot}/boot/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }

[jaybo]

Just hoping the dev team realizes that Typescript/Vue debugging is still broken for at least some of us! Please read #9614 for more details. Some direction here would be useful, since I haven't been able to debug TS/Vue properly for months now on a clean, freshly created project. Please pick one or more:

1. Typescript/Vue debugging with webpack will never work, so just get used to it.
2. Typescript/Vue debugging with Vite is the path forward. Please switch.
3. Typescript/Vue debugging with webpack DOES work. You must have something wrong with your configuration.
4. Other.