WebStorm 2023.3 Help

Web Browsers and Preview

On this page, you can configure the following:

  • Integrate installations of Web browsers with WebStorm, activate or deactivate launching Web browsers from WebStorm .

  • Specify whether a browser will be launched by running its executable file or through the default system command .

  • Appoint the default WebStorm browser in which WebStorm will open HTML files upon request by default, that is, when no browser is specified explicitly

  • Enable the browser popup for opening HTML or XML files in the browser.

  • Configure when a page should be reloaded automatically in the browser or in the built-in preview.

Learn more from Configure browsers

Browsers

In this section, specify which browsers will be available for previewing HTML output. The section shows the browsers from the predefined list and the previously configured custom browser installations, if any.

WebStorm is shipped with a predefined list of most popular browsers that you may install and launch automatically from the IDE during running, debugging, or previewing the output of an HTML file. WebStorm presumes that you install browsers according to a standard procedure and assigns each installation an alias which stands for the default path to the browser's executable file or macOS application.

If in your actual browser installation the path to the executable file is different, you need to specify it explicitly in the Path field.

In addition to the predefined browsers, you can configure as many custom browser installations as you need using the controls on the toolbar.

Item

Description

Active

Select this checkbox to enable the use of the respective browser from WebStorm. The browser will be added to the context menu of the Open in Browser menu item and its icon will be displayed in the browser icons popup. See Configure the browser icons popup to learn how to hide and show the popup in the editor.

If this checkbox is cleared, the corresponding browser icon will not appear in the icons toolbar or popup.

Name

In this column, specify the browser name.

Family

In this column, specify the family to which the browser belongs.

Path

In this column, specify the path to the executable. If the browser was installed according to a standard installation procedure, most likely the alias in the Path field points at the right location. If it does not, click the Browse button and select the actual path in the dialog that opens. In the dialog that opens, select the path to the executable file of the corresponding browser.

Toolbar

Item

Description

the Add button

Click this button to add a custom browser to the list.

the Remove button

Click this button to delete the selected customer browser from the list. Note that you cannot delete the browsers from the predefined list.

the Edit button

Click this button to specify a custom profile for Firefox or a browser of the Chrome family. The button is available only when Firefox and Chrome are selected.

In the Firefox Settings dialog, specify the Firefox browser profile to use for previewing output:

  • Path to "profiles.ini": in this field, specify the location of the profiles.ini file, which determines the Firefox profile to be used.

  • Profile: from this list, select the desired predefined profile to use. Learn more at Firefox browser profile.

In the Chrome Settings dialog:

  • Command line options: In this field, enter the command-line options to launch an instance of Chrome. If you need more space, click the Expand icon, or press Shift+Enter to open the editor box. Learn more about Chrome command-line options by opening chrome://flags in Chrome.

  • Use custom user data directory: Select this checkbox to define a user-specific Chrome profile settings to use and specify the location of the user data directory in the WebStorm settings.

The Previous Occurrence buttonThe Next Occurrence button

Use these buttons to move the selected browser up or down in the list. The order of browsers is important for rendering external resources and previewing files with Web contents.

The Copy button

Click this button to create a copy of the selected browser.

Default Browser

In this section, specify the default WebStorm browser that will be used by default for rendering external resources and previewing files with Web contents. This browser will be referred to as Default in the context menu when you choose View | Open in Browser from the main menu or Open in Browser from the context menu of a file.

Item

Description

Default browser

Select the default browser from the list. The possible options are:

  • System default: Select this option to accept your operating system default Web browser as default for WebStorm.

  • First listed: Select this option to have WebStorm launch the first browser in the list. Change the order or browsers using the The Previous Occurrence button and The Next Occurrence button icons on the toolbar.

  • Custom path: Select this option to specify another Web browser as default for WebStorm. Type the path to the executable file of the browser or click the Browse button and select the path in the dialog that opens.

Configure the browser icons popup in the editor

In this area, configure whether you want WebStorm to show a popup with enabled browsers in HTML or XML files. This popup is used to preview the output of the current file.

By default, the browser icons popup appears only in HTML files. In XML files, the popup by default does not show up to help you read and edit your code without distraction. Use the For HTML files and For XML files checkboxes to have the popup displayed or hidden depending on the current file type.

Reload behaviour

In this area, specify the actions that trigger reloading HTML pages automatically in the browser or in the built-in preview. Learn more from Preview an HTML file in a browser.

From the Reload page in browser and Reload page in built-in preview lists, select the actions that will trigger automatic reload of pages in web browsers and in the built-in preview.

  • By default, On Save is selected, so after you open an HTML file in the browser or in the built-in preview, WebStorm automatically reloads the page every time this HTML file (or any linked JavaScript or Style Sheet file) is saved manually or automatically, refer to Save and revert changes.

    Reloading a HTML page on save

    When you save a file that triggers page reload, WebStorm shows a Got it tooltip.

    Reload on save: Got it tooltip
  • If you select On Change, pages are reloaded as you type.

    Built-in preview: reload preview on change
  • To suppress automatic reload of pages, select Disabled.

Last modified: 20 February 2024