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.
Hover over the breakpoint symbol, choose the Settings icon, and then select Remove breakpoint once hit in the Breakpoint Settings window.
If a source file has changed and the source no longer matches the code you're debugging, the debugger won't set breakpoints in the code by default. Normally, this problem happens when a source file is changed, but the source code wasn't rebuilt. To fix this issue, rebuild the project.
Run to a breakpoint in code To set a simple breakpoint in your code, select the far-left margin next to the line of code where you want to suspend execution. You can also select the line and then select F9, select Debug > Toggle Breakpoint, or right-click and select Breakpoint > Insert Breakpoint.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With