Search code examples
debuggingvisual-studio-codevuejs2chrome-debugging

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

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.

Solution

  • 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:

    enter image description here

    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.