How to Debug Multiple Services/Applications in Visual Studio Code Using Debugger
Among the years, I have seen VSCode adding new features making it from a normal Text Editor to a Professional IDE.
In this article, I will explain how to run mutiple debbugers in a single IDE.
Let’s take an Simple Example. I have two JavaScript files named app.js and app2.js running a very basic express application just differing by port numbers.
app.js
app2.js
Both of these files are in a same directory. You need to configure these files in launch.json in a seperate object like this:
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "APP 1",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/app.js"
},
{
"type": "pwa-node",
"request": "launch",
"name": "APP 2",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/app2.js"
}
]Then you need to add compounds array .
"compounds": [{
"name": "Multiple app",
"configurations": ["APP 1", "APP 2"]
}]in the configurations object, you need to add only those names which are present inside the name property inside the array of objects in configurations (property is present in top level json).
Your launch.json should become like this:
Now, move to the leftmost menu bar and navigate to Run and Debug option. You need to select Multiple app from the dropdown in debug menu. The names of the dropdown appears from the name property in launch.json.
Now click on the Green bordered Play button. You will observe that there will be 2 options available on the debugger options So that you can restart/stop one app at a time.
Also in the debug console, there will be 2 options available in the drop-down. You need to select desired app from drop-down in debug console to see logs of an app you desired for.
These kind of productivity tips saves a lot of developer’s time and effort in running applications locally instead of manually running each and every one service. It will be very useful for applications running multiple services or based on monorepos.
