VSCode debugging is a total mess (Nuxt3)

[wise magnet]

Hey everyone,

I tried so many things to get the debugger going, but it seems the sourcemaps are just messed up and I don't know why.

• For Server side, it does not work at all
• Client Side works until the first save.

Chrome works fine; in the sources tab, I see my TS code and put breakpoints there, which are reflected in VSCode.

General information:

• VSCode latest
• Nuxt3 latest
• Node: tried v16.20.0 and v18.16.0
• OS: tried Win10 and Ubuntu in WSL2
• Config files at the end of the post

This is what happens (file page edit-blog.vue)

First time navigating in chrome to /edit-blog: everything works fine (see pic1)
Adding new line, saving, navigating again to /edit-blog:

• Setting breakpoints is already weird, Line breakpoints e.g. jump to seemingly random tokens (pic2 last breakpoint)
• The sourcemap does not seem to be updated since empty lines are seen as statement, but some statements are not.

Then, I regularly see the transplied code (pic 3) and the breakpoints are no longer in the original file (pic 4).

While Client side seems like distorted, I have no clue what the Server side is doing in the background, it seems even more random.
E.g. the last time, the breakpoint on one of the log statements halted on /node_modules/h3/dist/index.mjs, then a second time on the empty line.

I have been searching so much on this, I can't be the only one, right?

launch.json

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "fullstack: Nuxt & Chrome",
      "configurations": ["server: Nuxt", "client: Chrome"]
    }
  ],
  "configurations": [
    {
      "name": "client: Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
    },
    {
      "name": "server: Nuxt",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal"
    }
  ]
}

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
    '@pinia/nuxt'
  ],
  sourcemap: {
    server: true,
    client: true
  },
  vite: {
    
    build: {
      sourcemap: 'inline'
    }
  }
})

[patent thistle]

I'm also trying debugging, added sourcemaps, and with pycharm, I cannot for the life of me set break points for compiled nuxt.

[mental inlet]

Did you ever get this working? Having the exact same problem. I can add 'debugger;' statements but that's a PITA

[ionic grail]

Back in the beta days I did quite a lot of looking into this and got most of it working.

I'm not sure if it's still relevant, but I recorded the journey in a thread: #1011385390613156000 message

There might be some useful pieces in there?

It might be more client-based code though, can't remember if I ever got server code to work, but might be worth a read!