VueJS debug recipe does not work

[djeetee]

I have been using VSCode for a few months and have not been able to find a way to consistently debug a simple VueJS app.

I have followed the recipe vuejs-cli with no luck.

The main issue I keep encountering is the Unbound breakpoint whereby the breakpoints I set are unreachable.

I have tried many launch.json configs including the ones below with no success:

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "pwa-chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
},

{
    "name": "Attach hm",
    "port": 9229,
    "request": "attach",
    "skipFiles": ["<node_internals>/**"],
    "type": "pwa-node",
    "address": "localhost:8080",
    "localRoot": "${workspaceFolder}/src"
}

A few weeks ago I stumbled on the following config which magically solved my problem and I was happily debugging for days:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}/src",
    "breakOnLoad": true,
    "sourceMaps": true
}

After taking a few days off coding, I came back to VSCode yesterday, there was the 1.47.2 update waiting. Did that, wrote a few lines of code, tried debugging like i was doing before and boom! the Unbound breakpoint problem from hell returned.

Checked my commits, no changes to launch.json, no new installs or updates whatsoever.

II don't get why it stopped working.

One thing to note is that I can perfectly debug in VSCode the server portion of my app (a node/express REST server) with no problem at all.

Very frustrating and I really do not want to go back to debugging using Chrome's DevTools which is a whole mess.

Could anyone help?

thank you.

[njzydark]

I have been using VSCode for a few months and have not been able to find a way to consistently debug a simple VueJS app.

I have followed the recipe vuejs-cli with no luck.

The main issue I keep encountering is the Unbound breakpoint whereby the breakpoints I set are unreachable.

I have tried many launch.json configs including the ones below with no success:

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "pwa-chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
},

{
    "name": "Attach hm",
    "port": 9229,
    "request": "attach",
    "skipFiles": ["<node_internals>/**"],
    "type": "pwa-node",
    "address": "localhost:8080",
    "localRoot": "${workspaceFolder}/src"
}

A few weeks ago I stumbled on the following config which magically solved my problem and I was happily debugging for days:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}/src",
    "breakOnLoad": true,
    "sourceMaps": true
}

After taking a few days off coding, I came back to VSCode yesterday, there was the 1.47.2 update waiting. Did that, wrote a few lines of code, tried debugging like i was doing before and boom! the Unbound breakpoint problem from hell returned.

Checked my commits, no changes to launch.json, no new installs or updates whatsoever.

II don't get why it stopped working.

One thing to note is that I can perfectly debug in VSCode the server portion of my app (a node/express REST server) with no problem at all.

Very frustrating and I really do not want to go back to debugging using Chrome's DevTools which is a whole mess.

Could anyone help?

thank you.

try this

    {
      "name": "Vue Launch",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/src/*"
      }
    }

[djeetee]

@njzydark, Buddy you made my morning!!!! works like a charm. The simplest sourceMapPathOverrides did the trick. I will keep testing and I hope it will continue to work. I think the VSCode team needs to review the published recipes to verify/update them. If any core VueJS team member is reading this, the same should be done to the published launch config in the VueJS docs. Thanks again. I will close this later today oceanarium I've done more testing.