Improve debugging DX with VSCode

[TheDutchCoder]

Environment

---

• Operating System: Darwin
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@8.12.1
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://github.com/TheDutchCoder/nuxt-app-dx

Steps to follow:

1. Clone the repo and npm i
2. Open the project in VSCode
3. In the Run and Debug tab, select fullstack: nuxt and wait for the server and Chrome to finish
4. Make sure the inspector is open in Chrome
5. Add a breakpoint to TestComponent (e.g. on line 10 const b = ref(false))
6. Reload the page
7. This will successfully break in Chrome and VSCode, this works perfectly
8. Skip over and remove the breakpoint
9. Set the same breakpoint int the index.vue page (same line)
10. You'll notice it won't really set the breakpoint visually, but it'll appear in the breakpoints section (it might show a greyed out circle, instead of a red one)
11. Reload the page
12. Break will happen at the wrong line in Chrome (12 instead of 10) and the compiled index.vue file is shown in VSCode, instead of the original SFC
13. Skip over and remove the breakpoint again
14. Now in Chrome, set a breakpoint at line 10 for index.vue
15. Reload the page
16. Breakpoint will be correct in Chrome, but still open the compiled index.vue in VSCode.

Expected result:

1. To always open the original SFC, regardless of it being a component or page, and not the compiled version.
2. To be able to directly set breakpoint in pages in VSCode

Describe the bug

When debugging in VSCode through the "Run and Debug" tab, you can set breakpoints in your components and composables just fine. They'll be mapped to the right source in Chrome and everything seems to work.

However, when you try to do the same thing for pages, things get a bit strange, as the breakpoint won't be set properly (sometimes in completely the wrong place) and won't be mapped back to the original page's SFC, but to the transpiled version instead.

My best guess would be that when pages are generated from components (i.e. the routes are being created, etc), these SFC's get interpreted/transpiled and those files become the source for the breakpoints.

Additional context

We have a thread with @danielroe on Discord for reference as well: https://discord.com/channels/473401852243869706/1011385390613156000

Logs

No response

[pi0]

Thanks for reporting the issue. I guess @danielroe is also tracking it but seems source map for pages components is not updated with a transform plugin that changes the line order.

(Preserving map to original source contents could be also a nice improvement)