Debug Quasar V2 using WebStorm 2021

Works for me

Note that the right mapping for src folder is webpack://quasar-app1/./src/ when using the latest quasar cli, but debugging works for me without mappings

Could you share a test project the issue can be repeated with?

Thanks, I have modified src folder to webpack://quasar-app1/./src/ , still no working for the following case. 

Please find the project at:
https://www.dropbox.com/s/8splse4xuazpfh3/quasar-app1.zip?dl=0

I put the breakpoint at hello() function and when click on the button, the breakpoint is not triggered.

I have put all the node modules inside the folder, so to run it just do a "quasar dev" under quasar-app1 folder, but needs to get quasar install first (npm install -g @quasar/cli)). Let me know if there is any issue in running it.

Reproduced; unfortunately the sourcemaps generated by quasar don't allow resolving the original sources reliably. For every Vue component/page, there is a bunch of scripts Component.vue?xxxx and only one of them contains original source code from script tag (but without template,script, style, so none of the scripts restored from sourcemaps matches the original .vue file content):

Depending on the devtool option, the presence of the hashcode in the name and the path to the original scripts changes, but the issue still persists. For example, with

devtool: 'source-map'

the script with name and path exactly matching the original file is produced, but it contains the generated code:

I've checked the other debuggers that use the same debugging APIs as WebStorm (VSCode, for example), and they exhibit the same issue - breakpoints are not resolved, clicking the links in debugger console opens the generated code instead of the original source file

Tried the instructions from https://quasar.dev/start/vs-code-configuration#debugging-a-quasar-project-in-vs-code, they don't help

I've also tried the suggestions from https://github.com/quasarframework/quasar/issues/8235 and https://github.com/quasarframework/quasar/issues/9614, to no avail

Hi Elena,

>I've checked the other debuggers that use the same debugging APIs as WebStorm (VSCode, for example), and they exhibit the same issue

I have got VSCode to work with the Quasar Debugging on the project file I sent you with some workaround by the following configuration here: https://quasar.dev/start/vs-code-configuration

The workaround is in this video: https://youtu.be/2_crXPO1y_g

The same workaround does not work for Webstorm.

As far as I can see from your video, when the execution is suspended on debugger; statement, VSCode opens a runtime (transpiled) script and not the original .vue file. And breakpoints set in original files are not bound. So no, VSCode can't map the runtime scripts to original source code, just as WebStorm

Hi Elena, yes, I am aware of that, I am using a workaround. But such a workaround does not work in Webstorm.

Have you all been able to get debugging working with webstorm?

Nope, any updates? (Vue3 + Quasar2 + composition API + TypeScript + Webstorm 2023.3.2)

Works for me when using a basic Vue3 + Quasar2 + TypeScript app:

strange. I just created a brand new quasar project. Breakpoints are not even showing the hooks in WebStorm. Can you debug this: https://github.com/BernhardSchlegel/webstorm-debug/tree/main/quasar-project? Is it maybe the composition API (with `<script setup lang="ts">`)?

Just found this on stackoverflow: https://stackoverflow.com/questions/68000805/webstorm-ide-support-for-vue-3-composition-api-really-bad-or-is-my-config-messed linking this youtrack https://youtrack.jetbrains.com/issue/WEB-49000#focus=Comments-27-4909862.0-0 - maybe relevant?

Sorry for chain posting, but putting 

sourceMapPathOverrides: {
  "webpack://src/*": "${webRoot}/*"
},
devtool: "source-map",

Debugging your project doesn't work for me for the reason described in my comment above: https://intellij-support.jetbrains.com/hc/en-us/community/posts/4409692650514/comments/4409841773842

If you open your page in Chrome Dev Tools, you will see multiple chunks that have your component name prefix (with different random suffixes), but none of them actually contain the original source code: