Я учусь Vue
. Недавно я обнаружил, что в Visual Studio
есть ошибка, которая эффективно предотвращает остановку отладчика в точках останова клиентских скриптов (https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot-debug-javascript-code.html).
Я понял, что, как я писал здесь: Отладка Vue. js приложения в Visual Studio 2017 , следуя рецепту из https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli, можно преодолеть эту проблему в Visual Studio Code
путем переопределения Source Map
путей.
Рассмотрим следующую структуру проекта:
Чтобы правильно разрешить Source Maps
для отладки, я потребуется launch.json
файл в Visual Studio Code
:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\source\\server\\server.js",
"preLaunchTask": "build"
},
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/source/client/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${workspaceFolder}/node_modules/*"
}
}
],
"compounds": [
{
"name": "Vue",
"configurations": [
"Node",
"vuejs: chrome"
]
}
]
}
со следующим tasks.json
:
{
"version": "2.0.0",
"tasks": [{
"label": "build",
"command": "npm",
"args": ["run", "build"],
"type": "shell"
}]
}
Где сама задача сборки определена в package.json
и состоит из следующих команд:
"build": "cd source/client && vue-cli-service build"
В Visual Studio
Я могу отразить его, задав соответствующие свойства:
Однако мне также нужно как-то переопределить пути Source Map
, вопрос в том, как отразить опция sourceMapPathOverrides
Visual Studio Code
в Visual Studio 2019
?
"webRoot": "${workspaceFolder}/source/client/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${workspaceFolder}/node_modules/*"