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 try to place breakpoints in my .js or .vue files, VS Code seems to be placing the breakpoints in the wrong place. For example, here I try to place a breakpoint in one of my getters on line 40, but it ends up 15 lines later:

Is this a bug in VS Code, or perhaps some other issue? Any suggestions on how to fix?

Other breakpoints on other lines have the same behavior of appearing on later lines, but I cannot detect a pattern. It happens in both .js and .vue files, and it happens both in Object declarations and root-level traditional function definitions.

I am using VS Code 1.24.0.

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://💻app/*": "${webRoot}/*"
  }

I left these as they were, and added two entries. To fix main.js, I added:

"webpack:///./src/*": "${webRoot}/*",

and to fix the files in the services folder I added:

"webpack:///./src/services/*": "${webRoot}/services/*",

At this point all my breakpoints behaved in all my files throughout the project.

---

But Why?

Unfortunately I can't tell you why these two magic lines are needed in my case, or even what they really do.

However, I can tell you how I divined them. In Chrome's devtools, I drilled into the webpack:// section of the "Sources" tab. I noticed that src/components was showing in the "root", (green arrow), and my other sources (red arrows) were not. They were only showing under . (circled red).

Disclaimers: I'm not an expert in Vue, webpack, chrome debugging protocol, sourcemaps, or vue-loader. I'm just one more developer who wants to set his breakpoints in his IDE, not his browser.

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

Adding "sourceMaps": true, to launch.json fixed this.

Answer 4

After some intense minutes where I questioned my very existence and started working on my master plan to burn Microsoft to the ground I got to the bottom of it

Issue:

Some of my breakpoints were jumpy but only when I actually executed the code and debugger was attached. I could set it well when not running the code, but as I ran it they got scrambled.

Solution:

.js and .ts files were being mapped wrongly so I just had to npm run build and voila

Answer 5

I just found what was the bug for me. When you delete lines your binary dont know and the debugger take the lines on that not on what it is display on your window. So you just have to remake your binary with the change of lines.

Answer 6

TL;DR - make sure your code is actually being referenced/called

In my case:

• node.js server app
• set breakpoint on line 209 (the first statement in method 'InsertClients')

The IDE would automatically move the breakpoint to the bottom of the file, line 649.

WTF!?

I finally found out: its because I'd named the method incorrectly: 'InsertClients' instead of 'InsertClient'

So the IDE must have been wiggin' out that the code would never get executed and therefore placed the breakpoint on the next piece of code that would get executed after the method definition...which was the close brace of the app (or something like that).

Answer 7

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 
}