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.
Patrick Szalapski
I make software using .NET, lead software teams, and coach on Scrum and Agile. I've spent my whole life twiddling with software, and I have grown to be passionate about good software design and practices. Since 2009, I have been leading Scrum teams and gathering all the best practices and attitudes necessary to make a software team effective and efficient. I am most experienced in digital/relationship marketing, eCommerce, CRM, ETL, and data warehousing domains, but I don't limit myself to these areas.
Updated on June 15, 2022Comments
-
Patrick Szalapski about 2 years
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.