PhpStorm 2023.3 Help

Web Browsers and Preview

On this page, you can configure the following:

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

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

  • Appoint the default PhpStorm browser in which PhpStorm 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.

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.

PhpStorm 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. PhpStorm 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 PhpStorm. 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.

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 PhpStorm 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 PhpStorm 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 PhpStorm.

  • First listed: Select this option to have PhpStorm 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 PhpStorm. 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 PhpStorm 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, PhpStorm 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, PhpStorm shows a Got it tooltip.

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

  • To suppress automatic reload of pages, select Disabled.

Last modified: 25 March 2024