Run/debug multiple targets
WebStorm provides several ways to run/debug multiple things at once, for example, a client-server app or a complex test, which requires launching several different processes or tasks. The first step in any case would be to create run configurations for each of the tasks or processes that need to be launched. Once all necessary configurations are in place, you have the following options:
Launch multiple configurations in parallel using a compound run configuration
Launch multiple configurations in sequence using the Before Launch tasks
When multiple configurations are launched at once, each will be available in a separate tab in the Run or Debug tool window.
![ws_run_config_compound_separate_tabs.png ws_run_config_compound_separate_tabs.png](https://resources.jetbrains.com/help/img/idea/2024.3/ws_run_config_compound_separate_tabs.png)
A Compound run configuration lets you launch several run/debug configurations simultaneously.
When you launch a Compound configuration all the configurations in it are started in the same mode, either Run or Debug. Therefore, to start an application in the development mode before debugging its client- and server-sides, run an npm script from package.json, or configure it as a Before Launch task, or create a separate npm run configuration.
note
The exact order of launching configurations within a compound configuration is not guaranteed.
Create a run/debug configuration for each app and process that should be launched in your session.
Go to Run | Edit Configurations. Alternatively, press AltShiftF10, then 00.
In the Run/Debug Configurations dialog, click
or press AltInsert, then select Compound.
Specify the run/debug configuration name in the Name field. This name will be used to identify the run/debug configuration in lists and menus.
Select Store as project file to make this run/debug configuration available to other team members.
To include a new run/debug configuration into the compound configuration , click Add
and select the desired one from the list.
Apply the changes and close the dialog.
You can use run/debug configuration's Before Launch tasks for different tasks, including launching other run/debug configurations. For example, you can add an npm script to a React Native configuration to launch a bundler.
Create a run/debug configuration for each app and process that should be launched in your session.
Go to Run | Edit Configurations. Alternatively, press AltShiftF10, then 00.
In the Run/Debug Configuration dialog, select the configuration that should be launched last.
Expand the Before launch area, click
, and select Run npm script from the Add New Task list.
In the NPM Script dialog, select the script to execute, for example, to launch a bundler, and click OK.
Make sure that all necessary scripts are added. Use the
Up Alt0↑ and
Down Alt0↓ to arrange the launch order (scripts at the top will be launched first).
Apply the changes and close the dialog.
Thanks for your feedback!