5

I'm using Vue 3 and I want to debug the standard Vue demo using VS Code (Chrome Extension Debugger). My vue.config.js looks like this:

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

Here are my launch.json settings:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*"
            }
        },
    ]
}

When starting the debugger, I can only debug the compiled app.js and not the HelloWorld.vue. To me it looks like the source map is not being built. Can someone help me with this problem?

Component to debug (components/Hello World.vue)

Debugged compiled app.js

If it's necessary:

  • Node Version: 15.11.0
  • Vue-CLI Version: 4.5.11
MASC
  • 51
  • 3

1 Answers1

2

I'm having the same issue. I'm not sure where to report it, but a workaround I found is adding "debugger" seems to work until there's a fix. (My launch.json and vue config is the same as yours.)

enter image description here

avenmia
  • 2,015
  • 4
  • 25
  • 49