Compound debug configurations
Often you need to run multiple processes at once, but debug them as if they were the same project. A common scenario for this is running a React, Angular or Vue app, along with some sort of API service using Express or Hapi. VS Code has a feature called "Compound Launch Configurations" that allow you to launch multiple debug processes at one.
Open "4-compound-launch-config"
Start the frontend application
Create two launch configs..
One for the Node process that runs in the "/server" folder
One of the Chrome process that runs from the root
Create a compound launch config that includes both of the above configs
Run the compound launch config
Add a breakpoint to "src/App.js"
Add a breakpoint to "server/routes/index.js"
Hit both the breakpoints
Open a new integrated terminal instance (Cmd/Ctrl + `)
Make sure that you are in the "4-compound-launch-config" folder
Run the frontend application with
npm start
Open the Debug Explorer (Cmd/Ctrl + Shift + D)
Open the dropdown list and select "Add Config (4-compound-launch-config)
Select "Chrome" from the prompt
Modify the launch config so that it looks like this...
Click the "Add Configuration" button
Select "Node.js Launch Program" from the list
Change the "program" value in the "Launch Program" config to be "${workspaceFolder}/server/server.js"
Right above the "configurations" attribute, add a "compound" attribute. Start typing and then select "compound" from the auto-complete.
Name it "Launch Project 4"
Set the "configurations" attribute to...
Select "Launch Project 4" from the dropdown list in the Debug Explorer
Press the green button next to the dropdown list
VS Code will launch a new instance of Chrome and start the Express server project.
Add a breakpoint to line 12 in the "server/routes/index.js" file
Add a breakpoint to line 39 in the "src/App.js" file
Change the color in the app and press the button
Hit the breakpoints
Last updated
Was this helpful?