Tag: Debug

Running multiple projects from Visual Studio

We're probably all familiar with the debugging experience in Visual Studio. Press F5 or hit the green play button and your application will run in debug mode. If you have multiple projects in you solution which can run (i.e. they're not a class library) then the one with a bold title in solution explorer will run.

To change which project starts by default right click the project and choose Set as Startup Project.

Selecting start up project in Visual Studio

You can also use the drop down next to the play button to switch which project will run when you start debugging.

Selecting project to run in Visual Studio

Running multiple project at the same time

However switching between projects might not be what your after. You may need multiple projects running that interact with each other. e.g. You could have an API written as an Azure Function and a Website which uses the API. The simple option is to just open to copies of Visual Studio and run one in each, but there is a better way.

Right click your solution in Solution Explorer and click properties.

Selecting properties for solution in Visual Studio

Make sure you have Startup project selected on the left. On the right change the radio to Multiple startup projects and in the grid use the drop down to change the action to either Start or Start without debugging on the projects you want to run.

Visual Studio selecting multiple startup projects

The drop down next the play button will now show that multiple startup projects have been selected.

Visual Studio multiple startup projects selected

Now when you start to debug all the projects you have set to start will all debug together for one seamless debugging experience. Just make sure they're not all running on the same port number.

Debugging VueJS + TypeScript with VS Code

I recently asked a developer working with VueJS how they do debugging and they told me console.log. Not wanting to go back to the dark ages of development I went and found the solution myself.

The VueJS website has a guide on how to do debugging with VS Code https://vuejs.org/v2/cookbook/debugging-in-vscode.html however the instructions they give don't work with TypeScript. Interestingly it does get you far enough to set breakpoints within either Chrome or Edge, but I don't really count that as a solution. The idea of debugging is you step through your code and see everything that is happening, not step through a copy of your code and then go and find the corresponding file in your code editor.

After a bit of digging I managed to get it to work, so here's my solution.

Prerequisites

This part is essentially as per the VueJS guide.

Make sure you have VS Code installed and install the Debugger for Chrome. Don't worry if you use Edge, the same extension will work.

Create your project with the vue-cli, following the instructions in the Vue CLI Guide. When you do this make sure you pick Typescript.

Displaying Source Code in the Browser

This isn't what we're after but it's still a step we must do.

Create a file called vue.config.js in the root of your solution and paste the following into it. This creates the mapping for the debugger to map compressed files back to the original.

module.exports = {
configureWebpack: {
  devtool: 'source-map'
}
}

Configure debugging from VS Code

In VS Code select the Run and Debug button on the left and click the Run and Debug button. If you don't see this button it probably means that you already have a launch.json file defined. Instead a cog will appear at the top to edit the existing settings.

VS Code Run and Debug

From the options choose either Chrome or Edge.

VS Code select Chrome

This will create a launch.json file with some defaults filled out. Replace the contents of the file with the below (this is the part which differs from the instructions on VueJS's site).

I have included 2 configurations, one for debugging with Chrome and the other for Edge. They are both essentially the same and just launch a different browser.

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
  {
    "type": "pwa-msedge",
    "request": "launch",
    "name": "vuejs: edge",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
    },
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*"
    ]
  },
  {
    "type": "chrome",
    "request": "launch",
    "name": "vuejs: chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
    },
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*"
    ]
  }
]
}

Debug from VS Code

To start your debugging you still need to start the application from a terminal with npm run serve. The debugging experience is more like Visual Studios attaching to a process rather than running application by clicking start.

Once your application is running, to attach the debugger either press either F5 or go to the run and debug tab, make sure your browser of choice is selected and click the green play button. Your browser of choice will now open and VS Code should be attached and any break points you create will be hit.