'Debugging Vue in VScode and Chrome, unbound breakpoint

I'm trying to debug a Vue website I'm writing in VSCode and Chrome. When I put a breakpoint in the data() { return {...} } function it stops on it, but if I try to put it in a method in a Vue file or a JS service, once I launch Chrome through the debug config the breakpoints become unbound. Does anyone have any ideas about how to keep the breakpoints bound? This is my config file:

"version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/client/meet-for-lunch/src",
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug server",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/server/bin/www",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "skipFiles": [
                "<node_internals>/**"
            ]
        }

    ]
}

I'm including the debug config for the server because in works.

Here is an example of a method I'm trying to debug (from the Vue file), I put a break point at this.error = null . The method runs normally so I expect it to stop at the breakpoint :

        methods: {
            async login() {
                try {
                    this.error = null;
                    const response = await AuthenticationService.login({
                        email: this.email,
                        password: this.password
                    })
                    this.$store.dispatch('setToken', response.data.token)
                    this.$store.dispatch('setUser', response.data.user)

                }
                catch (err) {
                    console.log(`An error has occured: ${JSON.stringify(err.response)}`)
                    this.error = err.response.data.error
                }
            }
        }

I'm also trying to debug my service:

login(credentials) {
        return Api().post('/login', credentials)
    }

The Api object just creates the Axios request

Thanks,

Ben

vue.jsdebuggingvisual-studio-codebreakpoints


Solution 1:[1]

When I had Unbound Breakpoints in VSCode I ended up needing to start the process with the --inspect or --debug-brk=5858 flag. Beyond that, launch.json gave me lots of trouble, and these resources helped

launch.json examples:

    {
        "type": "node",
        "request": "attach",
        "name": "Node: Nodemon",
        "processId": "${command:PickProcess}",
        "restart": true,
        "protocol": "inspector",
    },
    {
        "name": "Launch tests via NPM",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
            "run-script", "testDebug"
        ],
        "port": 5858
    }

package.json

"scripts": {
  "start": "NODE_PATH=./src DEBUG=express:* NODE_ENV=dev nodemon -w src --ext ts --exec node --inspect -r tsconfig-paths/register -r ts-node/register src/index.ts",
  "testDebug": "NODE_ENV=test ts-mocha --debug-brk=5858 --paths -p tsconfig.json",
 }

},

Solution 2:[2]

https://www.codegrepper.com/code-examples/javascript/vuejs+vscode+unbound+breakpoint

After a whole day of searching this solved my problem

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

}

Solution 3:[3]

Well, it's not really an answer but I've restarted my Node server a couple of (more) times and now it stops at the breakpiont. I hope that the problem doesn't return. Now he doesn't show the value of the variables for some reason but I guess that's another problem.

Thanks for the help :)

Ben

Solution 4:[4]

I had the same issue in my vueJS project. Something to try before making any changes to files etc which solved it for me:

In the ClientApp/App folder: 1.Delete the node_modules folder 2.Delete the package-lock.json file 3.Open a cmd prompt for your ClientApp/App folder 4.Use the cmd "npm i"

This final step will reinstall all your node-modules. The issue I had must've been a conflicting node-module.

Solution 5:[5]

As of May 2022...

A note if you're using vscodium and firefox you need to install firefox-devtools directly from the marketplace: https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug

Beyond that the launch.json config is standard:

    {
      "name": "Vue:Client",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
        {
          "url": "file://",
          "path": ""
        }
      ]
    },

The extension suggested I insert those pathMappings.

See https://github.com/firefox-devtools/vscode-firefox-debug/issues/267

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 akik90
Solution 3 Bwal
Solution 4 cking888
Solution 5 Dash2TheDot

Related Questions