Cannot debug Vue app in Chrome with Visual Studio Code - Unbounded Break Points

Question

I am trying to debug a Vue app using VSC. I have the following launch.json

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides":{
            "webpack:///src/*": "${webRoot}/*"
        } 
    },
    {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides":{
            "webpack:///src/*": "${webRoot}/*"
        }
    }
]

}

I also added the following vue.config.js file to the root directory of the project

module.exports = {
configureWebpack: {
    devtool: 'source-map'
},
devServer: {
    port: 8080
}

}

To debug the Vue app, I use "npm run serve" at the terminal, click the "Run and Debug" option on the left side menu, and choose my debug config titled "Launch Chrome against localhost".

I am not able to bind any breakpoints,i.e. the breakpoints are unfilled gray circles within the code.

Not sure what to try next, nothing coming up in online searches on what could be the issue.

score 3 · Accepted Answer · answered Oct 21 '21 at 10:08

you probably have a mismatch in your "sourceMapPathOverrides".

"sourceMapPathOverrides" should point to the root foolder where webpack generated the source-map. You can check this in your chrome dev-tools.

Do the following

1 - Open your chrome dev-tools:

2 - Explore webpack:// most times it get's sourced inside . or src folders. To check this, open a random vue component and it should look like the same as in your vs-code editor, that's the right source-map where "sourceMapPathOverrides" should be pointing.

Bonus

The exact config I was using back then is:

{
  "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}/*"
      }
    }
  ]
}

Anyways make sure you follow the steps that I listed and see if that fixes it.

Solved my problem for standard Vue. I was able to bind breakpoints inside standard Vue, but not until components actually load. So it appears this always worked, I just didn't realize they wont bind until load. But...nothing associated with the VUEX store will allow breakpoints, including any JS I import in that Store js file. However, if I set the breakpoint from Chrome side, it will hand control off to VSC and I can step through the code that way. Not exactly how I want it to work but there is nothing the VUEX literature that references any other way. — Russell Longo, Oct 22 '21 at 00:02

Cannot debug Vue app in Chrome with Visual Studio Code - Unbounded Break Points

1 Answers1

Do the following

Bonus