Visual Studio Code breakpoint appearing in wrong place

how to debug code in visual studio
debug javascript in visual studio code
how to debug typescript in visual studio
visual studio code add configuration
visual studio debug javascript chrome
visual studio code debug vue
how to debug html in visual studio code
debug angular in visual studio code

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.


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.

Visual Studio Code breakpoint appearing in wrong place, To answer this for any particular case, one would need the launch.json configuration being used, and the source folder structure, at minimum. For more info on data breakpoints, check out this blog post on Data Breakpoints in Visual Studio 2017 version 15.8. If you are debugging managed code, a current workaround and equivalent alternative to data breakpoints is to use an Object ID with a conditional breakpoint .


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.

Debugging in VS Code highlights wrong code line · Issue #6044 , TL;DR: Debug a CRA app in the VS Code debugger and break on a that's inside react-dom.development.js , the highlighted line of code is wrong. in Chrome Dev Tools and VS Code, but the source code displayed in Chrome Dev It's not about testing, and doesn't seem to relate to breakpoint location. And then start debugging in VS Code with Debugger for Chrome and set a breakpoint on a certain line of code in a .vue file, the line is normally marked with the red circle, but the breakpoint is triggered in different app.js file in the code like this:


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 
}

Wrong breakpoint stop line · Issue #69 · microsoft/vscode-node , Not sure if I did a wrong configuration with nodejs or I missing something with the nodejs functionality of vs code. I'm trying to debug  Up to 5 attachments (including images) can be used with a maximum of 2.1 GB each and 2.1 GB total. Solution guidelines: Do: Use this space to post a solution to the problem. Feel free to be as detailed as necessary.


Breakpoints are shown in the wrong place after switching git branch , In addition, the debug status appears in the Status Bar showing the active debug All Breakpoints command sets all breakpoints again to their original location. First of all, while I was in Debug mode Visual Studio Code gave me the right hint, which is the one that you mentioned: Breakpoint warning: The source code is different from the original version. To allow this breakpoint to be hit: Add '"requireExactSource": false' to launch.json and restart debugging.


Debugging in Visual Studio Code, This error occurs when you have a relative path in your debug configuration such as cwd (current working directory), outFiles (location of other JavaScript files​)  To set a breakpoint in source code, click in the far left margin next to a line of code. You can also select the line and press F9, select Debug > Toggle Breakpoint, or right-click and select Breakpoint > Insert breakpoint. The breakpoint appears as a red dot in the left margin. In C# code,


Visual Studio Code workarounds for errors you might hit in the product., Troubleshoot Breakpoints in the Visual Studio Debugger breakpoint location and check Allow the source code to be different from the original  One of the key features of Visual Studio Code is its great debugging support. VS Code's built-in debugger helps accelerate your edit, compile and debug loop. Debugger extensions. VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.