vscode debug nuxt3 for client side issue

Question

I am using VSCode to debug a Nuxt 3 client-side application. My question is: if I run the debug configuration with client:chrome in VSCode, do I still need to manually start the app with npm run dev?

I’ve tried both methods, but neither of them worked for me. When debugging the server-side of Nuxt, I only need to run server:nuxt without manually executing npm run dev, and it correctly hits the server-side breakpoints. However, for the client-side, it’s not working.

Any idea or hints are more than welcome.

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },

    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "outputCapture": "std",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ]
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

nuxt.config.ts also add source map

  sourcemap: {
    server: true,
    client: true,
  }