How to debug both the API and the SPA?

[bickycheese]

Thanks for the template! 🙇

Any idea how to debug both the API and the SPA?
I've been fiddling with the launch.json file but I can't get it to work.

I'm using Linux, VS Code & Firefox.

[bickycheese]

I've got something working but it's a bit clumsy. Don't know if I'm doing something wrong.
This is my launch.json file:

    "version": "0.2.0",
    "compounds": [
      {
        "name": "Debug!",
        "configurations": [
          ".NET Core Launch (web)",
          "Launch Firefox"
        ]
      }
    ],
    "configurations": [
      {
        "name": "Launch Firefox",
        "request": "launch",
        "url": "http://localhost:5000",
        "type": "firefox",
        "webRoot": "${workspaceFolder}",
        "pathMappings": [
          {
            "url": "webpack:///src",
            "path": "${workspaceFolder}/ClientApp/src"
          }
        ]
      },
      {
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/vue_aspnet.dll",
        "args": [],
        "cwd": "${workspaceFolder}",
        "stopAtEntry": false,
        "serverReadyAction": {
          "action": "openExternally",
          "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
        },
        "env": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
          "/Views": "${workspaceFolder}/Views"
        }
      },
      {
        "name": ".NET Core Attach",
        "type": "coreclr",
        "request": "attach",
        "processId": "${command:pickProcess}"
      }
    ]
  }

Now 2 instances are started when I use the compound. One in already open firefox instance (with all my beloved add-ons including vue-devtools) and one fresh instance (without all the add-ons).
The first instance gets properly reloaded (".NET Core Launch (web)" when the API is ready but the second instance ("Launch Firefox") I need to reload myself. I'm only able to debug in the second instance but I prefer to debug in the first (with vue-devtools enabled).

Can you help me improve launch.json?

[liborpansky]

Hi, yesterday I tried to prepare launch.json to debug both Vue and .NET Core applications, I found the same configuration as you did.

You actually got one step further, because you managed to attach debugger. For me no matter what I do there are no symbols loaded. Even if I follow official Vue VS Code Debugging docs and open only Vue app without .NET Core, I can see messages from debug console from Chrome in VS Code, but breakpoints never hit with message "No symbols have been loaded for this document". Source maps are probably not loaded correctly, even if my folder configuration seams to be correct... 😞

For better configuration I would change browser from launch to attach, but I can't test it because of the source maps problem.

If someone has better configuration to debug both Vue and .NET Core apps feel free to share it 😃

[nickyg91]

I think the best approach may be try and leverage the "attach" type debugging documented in the VSCode extensions for chrome and firefox debuggers. I have had success with both of these in angular. I will see if I can get something working for this tonight 😄 .

[nickyg91]

This was actually relatively easy to get working (note, replace %% stuff with your application info)
If you are like me and have two open instances of VS Code, one pointing at the overall project, and one at specifically just the Vuejs application this setup will need to be tweaked.

If you are on windows, simply set the chrome or firefox desktop shortcuts to run with the CLI arguments the debugger extensions require. If you are on Linux, find the .desktop links for chrome and firefox and add the arguments there so you don't have to launch them from the terminal every time.

I use elementaryOS - the desktop files are located in /usr/share/applications.

Let me know if you run into any issues.

YMMV

    // Use IntelliSense to find out which attributes exist for C# debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
    "version": "0.2.0",
    "compounds": [
        {
            "name": "Debug SPA and API",
            "configurations": [
                ".NET Core Launch (web)",
                "vuejs:firefox"
            ]
        }
    ],
    "configurations": [
        {
            "type": "firefox",
            "request": "attach",
            "name": "vuejs:firefox",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceFolder}/",
            "pathMappings": [
                {
                    "url": "webpack:///src",
                    "path": "${workspaceFolder}/%ProjectNamespace%/%vue-app-folder%/src"
                }
            ]
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/%ProjectNamespace%/bin/Debug/netcoreapp3.1/%StartupProjectNamespace%.dll",
            "args": [],
            "cwd": "${workspaceFolder}/%ProjectNamespace%",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        }
    ]
}

[bickycheese]

I'll try again tomorrow but I never managed to attach, I always get the same error about connection refused (I'll update with the exact error), even when using the chrome debugger plugin.

[nickyg91]

I have gotten that before with Angular. Chrome itself uses a specific port for debugging, so you may have been missing that when launching it.

[bickycheese]

I found the settings for the ECONNREFUSED error but I'm unable to debug anything vue using attach.
My configuration works but I need to set a breakpoint in the .NET code and then magically breakpoints in VUE code also work. (in the second firefox instance only)

I remember looking into https://github.com/DaniJG/ASPCoreVueCLITemplates, I'll see if I can work out a solution from there combined with this template..

UPDATE: the alternative-spa-template seems to work nicely

[nickyg91]

Interesting. I cannot say I had the same issues you did. As soon as I corrected my sourcemap pathing it started to work, even without setting a breakpoint in C#.

[liborpansky]

The alternative-spa-template works, because it's a JS Vue app, default template this repository is a TypeScript Vue app.

I found a discussion about debugging in VS Code with TS Vue apps which seems to not work the same as JS projects here.

EDIT: Configuration from the issue above seems to be working and breakpoints hit also in *.vue files with TS: (Only for chrome launch request, chrome attach finishes with the error above Cannot connect to runtime process timeout after 10000 ms - (reason cannot connect to the target: connect econnrefused 127.0.0.1:9222))

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:5000",
  "webRoot": "${workspaceFolder}/ClientApp",
  "breakOnLoad": true,
  "sourceMaps": true,
  "disableNetworkCache": true,
  "sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*",
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/src/*"
  }
}

[nickyg91]

I am not sure why Chrome is bugging out. I should have specified that my project is TS based, which is why it was working for me with that setup. The source map overrides above are better than directly specifying the folder like I am doing as well.

Edit: Also - Vetur does not like it when the root folder of the workspace isn't the vue app. No intellisense and lots of "errors" that aren't actually there. Debugging this way can be a pain. I am trying to get a workaround going.

[nickyg91]

Got a workaround going. This may be a pain for some, but here it goes.
Open up a separate instance of vscode with ClientApp as the root folder.
Add a launch.json file inside of a new .vscode folder under ClientApp.
Note: Works very well for all things typescript, *.ts files and *.vue files. This does fall apart however when debugging async functions. This seems to be an issue with the debugger itself, and not with the template.

Edit: You will also have to "start" the app from the other VS Code instance that is open with the .net project in it, then use the other instance to start debugging in chrome.
Here is the Chrome config I got working with attach:

{
            "name": "vuejs:chrome",
            "type": "chrome",
            "request": "attach",
            "webRoot": "${workspaceFolder}/src",
            "port": 9222,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/*",
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/src/*"
            }
        }

[raygao]

You can use Vue-DevTools. https://github.com/vuejs/vue-devtools https://github.com/vuejs/vue-devtools
You set it up with the a registerSErviceWorker.ts file. with following content:
/* tslint:disable:no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
register(${process.env.BASE_URL}service-worker.js, {
ready() {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB',
);
},
cached() {
console.log('Content has been cached for offline use.');
},
updated() {
console.log('New content is available; please refresh.');
},
offline() {
console.log('No internet connection found. App is running in offline mode.');
},
error(error) {
console.error('Error during service worker registration:', error);
},
});
}

For instruction see:
https://naturaily.com/blog/pwa-vue-cli-3
https://github.com/facebook/create-react-app/issues/2396

[raygao]

Works quite well for me.