Debugging Vue 3 with Vue CLI V4

Question

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

avenmia · Accepted Answer · 2021-06-13 21:58:14Z

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.)

answered Jun 13, 2021 at 21:58

avenmia

2,6557 gold badges34 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Debugging Vue 3 with Vue CLI V4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related