How to override Source Maps for Vue.js Client Scripts in Visual Studio 2019 for the Debugger to stop at breakpoints?
Asked Answered
S

0

6

I am learning Vue. Recently I found out that there is a bug in Visual Studio that effectively prevents the debugger from stopping at breakpoints of client scripts (https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot-debug-javascript-code.html).

I figured out that as I wrote here: Debugging Vue.js app in Visual Studio 2017, following the recipe from https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli, it is possible to overcome this problem in Visual Studio Code by overriding Source Map paths.

Let's consider the following project structure:

enter image description here

To resolve the Source Maps properly for the debugging, I would need the following launch.json file in 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"
            ]
        }
    ]
}

With the following tasks.json:

{
    "version": "2.0.0",
    "tasks": [{
        "label": "build",
        "command": "npm",
        "args": ["run", "build"],
        "type": "shell"
    }]
}

Where the build task itself is defined in package.json and consists the following command:

"build": "cd source/client && vue-cli-service build"

In Visual Studio I can mirror it by setting the appropriate properties:

enter image description here

enter image description here

However I would also need to override the Source Map paths somehow, the question is how to mirror the sourceMapPathOverrides Visual Studio Code option in Visual Studio 2019?

"webRoot": "${workspaceFolder}/source/client/src",
"sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${workspaceFolder}/node_modules/*"
Sarracenia answered 11/1, 2020 at 18:54 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.