How to configure launch.json in Visual Studio Code to debug VueJS Project with Chrome and put bound breakpoints?

user_9924260 0
Viewed 455

I'm currently working in a symfony/VueJS project. I would like to debug the VueJs part with VSCode and Chrome. When I put a breakpoint on a line of vuejs code after launching the chrome debuging VSCode says the breakpoint is unbound. My VueJS code path is in assets/js.

I configured the .vscode/launch.json as follows and try many configurations, but I got "unbound breakoints" after launching the chrome debuging :

{
        "name": "WSL Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8003/login",
        "webRoot": "${workspaceFolder}",
        "sourceMap": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    },

Have you some ideas ?

Regards

Lamiel

vue.js visual-studio-code google-chrome debugging
1 Answers

Try the following configuration in your launch.json file

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

Also add the the following vue.config.js file to the root directory of the project

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