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. 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.