在Visual Studio 2017中调试Vue.js应用 [英] Debugging Vue.js app in Visual Studio 2017

问题描述

我已经从VS2017模板创建了一个基本的Vue.js应用。
一切正常，但是我无法调试任何代码。
您能解释为什么会发生这种情况吗？是否有任何解决方法？

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

解决方案

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).

这篇关于在Visual Studio 2017中调试Vue.js应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！