-
Notifications
You must be signed in to change notification settings - Fork 582
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue.js debugging in Chrome and VS Code isn't working #201
Comments
I had a similar problem. Followed the recipe, then I set the breakpoint, but when I start debugging the breakpoint suddenly slides some lines below. This Stack Overflow answer is what worked for me. |
@AlissonRS What part of the answer worked for you? What exactly did you do? |
@EricG-Personal specifically |
@AlissonRS Thank you. While using the sourceMapPathOverrides from the StackOverflow answer you provided allows the breakpoint on line 90 to work, there is still an issue with the overrides as can be seen when using the .scripts command to see where the source maps are pointing for particular files. In the case of HelloWorld.vue, there is a double reference to /src/ which is clearly wrong. However, it is apparently the first reference to HelloWorld that is involved in the breakpoint and that is why the breakpoint works. However, I am guessing that at some other time, something else may go wrong.
The sourceMapPathOverrides that fix the issues with HelloWorld.vue are:
The paths shown below by .scripts now look ok. I would like to know if:
So, this is a bug in the tutorial and the sourceMapPathOverrides should be updated.
|
@AlissonRS & @EricG-Personal Thank you guys so much - finally it's working - the tutorial should definitely be updated! |
Specifically microsoft#201 (comment) Also warning removed since that issue was resolved as a babel issue...
Confirm this fixes the issue. 👍 Do we need all the extra overrides or is this sufficient? {
"type": "chrome",
"request": "launch",
"name": "Debug Client with Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
} The relative paths of node_modules etc look ok tracing with
As Debugger for Chrome suggests: // Note: These are the mappings that are included by default out of the box, with examples of how they could be resolved in different scenarios. These are not mappings that would make sense together in one project.
// webRoot = /Users/me/project
"sourceMapPathOverrides": {
"webpack:///./~/*": "${webRoot}/node_modules/*", // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js"
"webpack:///./*": "${webRoot}/*", // Example: "webpack:///./src/app.js" -> "/Users/me/project/src/app.js",
"webpack:///*": "*", // Example: "webpack:///project/app.ts" -> "/project/app.ts"
"webpack:///src/*": "${webRoot}/*", // Example: "webpack:///src/app.js" -> "/Users/me/project/app.js"
"meteor://💻app/*": "${webRoot}/*" // Example: "meteor://💻app/main.ts" -> "/Users/me/project/main.ts"
} The comment says "These are not mappings that would make sense together in one project." |
It also seems that working configs as shown in this video (https://youtu.be/FOf1gKKTR14?t=268) only use a single override. |
Recipe updated in #213 |
I attempted to follow the instructions at
https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md
but could not get them to work as expected. After running, the debugger does stop, but it stops on line 1058 in app.js and not on line 90 in HelloWorld.vue ( return { ).
I should be using the latest released versions of the various products involved.
npm --version
6.7.0
vue --version
2.9.6
VS Code
Version 1.32.1 (1.32.1)
Chrome
Version 72.0.3626.121 (Official Build) (64-bit)
Chrome Extension Vue.js devtools
4.1.5 beta
VS Code Extension Debugger for Chrome
4.11.3
The text was updated successfully, but these errors were encountered: