WebStorm 2024.3 Help

Run/debug configurations

WebStorm uses run/debug configurations to run, debug, and test your code. Each configuration is a named set of startup properties that define what to execute and what parameters and environment should be used.

There are two types of run/debug configurations:

  • Temporary — created every time you select Run <item_name> from the context menu. To call the context menu, right-click an object or an area.

  • Permanent — created explicitly from a template or by saving a temporary configuration. Permanent configurations remain as part of your project until you remove them.

Whenever you run, debug, or test your code, WebStorm either uses an existing permanent run/debug configuration or creates a new temporary one.

Permanent configurations have opaque icons while the icons of temporary configurations are semi-transparent. The red cross over the configuration icon indicates an error in configuration settings.

The maximum number of temporary configurations is 5. The older ones are automatically deleted when new ones are added. If necessary, you can increase this limit in Settings | Advanced Settings | Run/Debug | Temporary configurations limit.

Permanent and temporary configurations have different icons

Create permanent run/debug configurations

WebStorm provides the following ways to create a permanent run/debug configuration:

Save a temporary configuration as permanent

  • Select a temporary configuration in the run/debug configuration switcher, click and select Save Configuration.

    Run/Debug configuration selector: Save configuration
  • Alternatively, select a temporary configuration in the Run/debug configurations dialog and click Save on the toolbar.

  • Open the Edit Configurations dialog (Run | Edit Configurations), select the temporary configuration to save, and click Save Configuration on the toolbar.

    Save temporary run configuration in the Edit Configurations dialog

WebStorm provides run/debug configuration templates for different languages, tools, and frameworks. The list of available templates varies depending on the installed and enabled plugins.

Create a run/debug configuration from a template

  1. Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.

    Run/Debug Configurations popup
  2. In the Run/Debug Configurations dialog, click on the toolbar or press Alt+Insert. The list shows the run/debug configuration templates.

    Select the desired template. If you are not sure which template to choose, refer to Run/debug configurations dialog for more information on particular templates.

    Create run/debug configuration: select the configuration type
  3. 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.

  4. Select Allow multiple instances if you want to allow multiple instances of the configuration to run at the same time. If this option is disabled, attempting to re-run the configuration will terminate the active session.

  5. Configure the run/debug configuration parameters. The list of mandatory and optional parameters may vary depending on the selected run/debug configuration type.

    Some optional parameters are hidden. To view and enable them, click the Modify options link.

    For the detailed description of the selected template, see the respective section of run/debug configurations reference.

  6. In the Before launch section, define whether you want to perform any specific actions before launching the application, for example, execute some tools or scripts prior to launching the run/debug configuration.

    For more information about particular Before launch activities, refer to Before launch

  7. You can either run the configuration right away or save the configuration to run it later.

    • To save the run configuration for later, click OK.

    • To run the configuration right away, click Run.

Before launch

In this area, you can specify tasks to be performed before starting the selected run/debug configuration. The tasks are performed in the order they appear in the list.

Item

Shortcut

Description

the Add button

Alt+Insert

Click this icon to add one of the following available tasks:

  • Run External tool: select to run an external application. In the dialog that opens, select one or multiple applications you want to run. If it is not defined in WebStorm yet, add its definition. For more information, refer to External tools and External Tools.

  • Run Another Configuration: select to execute another run/debug configuration and wait until it finishes before starting the current configuration. If you want to run several configurations in parallel, use a compound run/debug configuration.

  • Launch Web Browser: select this option to have a browser started. In the dialog that opens, select the type of the browser and provide the start URL. Also, specify if you want the browser be launched with JavaScript debugger.

  • Run File Watchers: select this option to have WebStorm apply all the currently active File Watchers.

  • Run Grunt task: select this option to run a Grunt task.

    In the Grunt task dialog that opens, specify the Gruntfile.js where the required task is defined, select the task to execute, and specify the arguments to pass to the Grunt tool.

    Specify the location of the Node.js interpreter, the parameters to pass to it, and the path to the grunt-cli package.

  • Run gulp task: select this option to run a Gulp task.

    In the Gulp task dialog that opens, specify the Gulpfile.js where the required task is defined, select the task to execute, and specify the arguments to pass to the Gulp tool.

    Specify the location of the Node.js interpreter, the parameters to pass to it, and the path to the gulp package.

  • Run npm script: select this option to execute an npm script.

    In the NPM Script dialog that opens, specify the npm run/debug configuration settings.

  • Start React Native Bundler: select this option to run the bundler automatically, as part of a running or debugging session. By default, this is done through react-native start.

    If your application uses Expo, you need to run the development server via the start npm task. To do that, click Add, then in the Configure React Native dialog, choose npm script and select start from the list.

  • Compile TypeScript: select to run the built-in TypeScript compiler and thus make sure that all the changes you made to your TypeScript code are reflected in the generated JavaScript files. In the TypeScript Compile Settings dialog that opens, select or clear the Check errors checkbox to configure the behaviour of the compiler in case any errors are detected:

    • If the Check errors checkbox is selected, the compiler will show all the errors and the run configuration will not start.

    • If the Check errors checkbox is cleared, the compiler will show all the detected errors but the run configuration still will be launched.

  • Generate CoffeeScript Source Maps: select this option to generate the source maps for your CoffeeScript sources. In the dialog that opens, specify where your CoffeeScript source files are located.

  • Upload files to Remote Host: select this option to have the application files automatically uploaded to the server according to the default server access configuration.

the Remove button

Alt+Delete

Click this icon to remove the selected task from the list.

Edit

Enter

Click this icon to edit the selected task. Make the necessary changes in the dialog that opens.

Method up

Method down

Alt+Up

Alt+Down

Click these icons to move the selected task one line up or down in the list. The tasks are performed in the order that they appear in the list.

Show this page

Select this checkbox to show the run/debug configuration settings prior to actually starting the run/debug configuration.

Activate tool window

By default this checkbox is selected and the Run or the Debug tool window opens when you start the run/debug configuration.

Otherwise, if the checkbox is cleared, the tool window is hidden. However, when the configuration is running, you can open the corresponding tool window for it yourself by pressing Alt+4 or Alt+5.

Share run/debug configurations

You might want to share your run/debug configurations so that your teammates could run the application using the same configuration or enable them to remotely attach to the process you are running.

WebStorm provides a mechanism to store your run/debug configurations as project files and share them through VCS. The same mechanism can also be used when you want to send your configuration as a file to someone else, create a local backup of your run/debug configurations, or import them from a file.

Legacy .ipr-based projects do not support individual run/debug configurations. With legacy projects, you can only share all configurations at once by adding the .ipr file to the VCS.

  1. Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.

    Run/Debug Configurations popup
  2. Select the run/debug configuration you want to share, enable the Store as project file option, and specify the location where the configuration file will be stored.

    You can configure any location unless compatibility with WebStorm 2019.3 and earlier is required. For compatibility with these versions, store the file in the suggested location.

    Store as project file box
  3. (Optional) If the .idea directory is added to VCS ignored files, the .idea/runConfigurations subfolder will be ignored, too. If the project uses Git, you can share .idea/runConfigurations and leave .idea ignored by modifying .gitignore as follows:

    /.idea/* !/.idea/runConfigurations

Run/debug configuration templates

All run/debug configurations are based on templates, which implement the startup logic, define the list of parameters and their default values. The list of available templates is predefined in the installation and can only be extended via plugins. However, you can edit default parameter values in each template to facilitate the setup of new run/debug configurations.

Configure the default values for a template

  1. Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.

    Run/Debug Configurations popup
  2. In the left-hand pane of the run/debug configuration dialog, click Edit configuration templates.

    Edit a run/debug configuration template from the run/debug configuration dialog
  3. In the Run/Debug Configuration Templates dialog that opens, select a configuration type.

  4. Specify the desired default parameters and click OK to save the template.

    Run/debug templates

Alternatively, select File | New Projects Setup | Run Configuration Templates from the main menu or press Shift twice and start typing Templates for New Projects.

Create a run/debug configuration template

In the dialog that opens, select the configuration type and specify the desired parameters in the right-hand pane.

Run/debug configuration folders

When there are many run/debug configurations of the same type, you can group them in folders for easier access.

Grouped run configurations

Create a folder for run/debug configurations

  1. Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.

    Run/Debug Configurations popup
  2. In the Run/Debug Configurations dialog, select a configuration type and click the New Folder icon on the toolbar. A new empty folder for the selected type is created.

    Adding a configuration folder
  3. Specify the folder name in the text field to the right or accept the default name.

    Spevifying the name of a configuration folder
  4. Select the desired run/debug configurations and move them under the target folder.

  5. Apply the changes. If a folder is empty, it will not be saved.

When you no longer need a folder, you can delete it Delete. The run/debug configurations grouped under this folder will be moved under the root of the corresponding run/debug configuration type.

Run/Debug configurations in the Services tool window

You can manage multiple run/debug configurations in the Services tool window. For example, you can start, pause, and stop several applications, track their status, and examine application-specific details.

Add Run/Debug configurations to the Services window

  1. Select View | Tool Windows | Services from the main menu or press Alt+8.

  2. In the Services tool window, click Add service, then select Run Configuration Type.

    Services tool window: Add run configuration
  3. Select a run/debug configuration type from the list to add all configurations of this type to the window.

    Note that the tool window will only display the configuration types for which you have created one or more configurations.

Last modified: 11 November 2024