debugging - 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:TSTPROJECT
└───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.