问题
I've created a basic Vue.js app from VS2017 template. Everything is working, but I cannot debug any code. Could You explain why this happens and is there any workaround?
debugger
回答1:
Vue is a front-end framework, which means it runs inside a browser, not locally (NodeJs). The best way to debug Vue.js application is to install a VueDevtolls from chrome's app store. Install this, it will help you accelerate your development process.
On a component you want to debug with, right click inspect, on the dialog appeared there should be some tags, find the Vue option and click it, you will see all data flows within any Vue components.
alternatively, if you really prefer break points, you can set up a webpack (if you created your vue project using @vue/cli then its already there), and set a break point inside the sources tag on the chrome's inspection dialog.
回答2:
It is most certainly possible.
All you have to do is start the browser in debug mode (--remote-debugging-port=9222) and set it (Chrome or Edge) as a Debug target (Attach the debugger to it).
https://docs.microsoft.com/en-us/visualstudio/javascript/debug-nodejs?view=vs-2019
Actually what made me wonder was that the template you used should be preconfigured for debugging without the need of anything else. There is a catch however, due to the specifics of Vue packaging with WebPack there is a problem with resolving sourcemaps correctly. See: https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot-debug-javascript-code.html (follow the links in the discussion there). I am not sure if these issue can be resolved in Visual Studio however. I plan to ask about it, for now it can be resolved in Visual Studio Code by overriding the Source Map Paths:
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*"
}
using the following recipe: https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli
What wasn't mentioned in the recipe however is that the maps need to be manually built beforehand with vue-cli-service build referenced as preLaunchTask in launch.json (or eventually, should the override be possible in Visual Studio 2017/2019 in <PostBuildEvent> of .njsproj).
来源：https://stackoverflow.com/questions/52549629/debugging-vue-js-app-in-visual-studio-2017