Visual Studio Code breakpoint appearing in wrong place

Question

In my Vue+Vuex project, I am trying to debug using Visual Studio Code. I have the debugger launching properly using Chrome debug tools, and properly using a map, but when I

Answer 1

To answer this for any particular case, one would need the launch.json configuration being used, and the source folder structure, at minimum. I have a true story from just last week to illustrate why:

Background

I recently inherited a relatively small Vue project, and immediately encountered the same problem. Breakpoints in VSCode were "jumpy" in all my source files.

The project wasn't developed in VSCode, so there was no launch.json in source control. My first naive attempt at a debug configuration looked like this:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceRoot}",
  "sourceMaps": true
}

One very important detail is the source folder structure. It looks like this:

D:\TST\PROJECT
└───src
    │   main.js
    │
    ├───components
    │       AnotherComponent.vue
    │       SomeComponent.vue
    │
    └───services
            myservice.js
            yourservice.js

---

Fixing it

The easy to find problem was the webRoot. Since my source files were all in a src folder, this needed to point to ${workspaceRoot}/src, instead of just ${workspaceRoot}. Just doing this fixed all the jumpiness in my .vue files under src/components. Unfortunately, breakpoints in main.js and in the files in the services folder were still jumpy.

The next step was to add a sourceMapPathOverrides key to the launch.json configuration. VSCode autocompletes what I believe are the default values:

  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "meteor://                                                                    

                                                        
            

Answer 2

Maybe editor and debugger are not using the same interpretation of "newline". Check if the code uses \r or \r\n and change it to the other.

Answer 3

I think you are actually trying to set break point at the middle of a statement.

It is actually a single statement.

Consider below statement.

You can set a break point infront of it.

> var obj = { a: value1, b: value2 }

If you write this as

var obj = { //can set break point here
 a: value1, //you can't set break point in this line 

 b: value2 //you can't set break point in this line 
}