Live Edit

The page is available only when the LiveEdit plugin is installed and enabled. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

Use this page to enable and disable instant preview of HTML, CSS, and JavaScript files in the actual browser and configure the appearance of the preview.

Item	Description
Highlight current element in browser on caret change	When this check box is selected, the browser highlights the area that represents the code you are currently editing in WebStorm.
Update	In this area, configure the way changes made to the code during a debugging session are applied. Note that an update will now be performed only if none of the modified files have any syntax errors. Auto in (ms): Choose this option to have the changes applied automatically at certain time interval and specify the delay in ms in the text box. This policy is not available for the client-side code of Meteor applications. Manual: Choose this option to apply the changes manually by clicking the Update <run configuration name> JavaScript button or the Update <run configuration name> button on the toolbar of the Debug tool window. It is recommended that you choose this option for debugging Meteor applications because applying changes to the client-side code is not supported. Restart if hotswap fails: With changes in HTML, CSS, and JavaScript on the client side, the contents of a Web page in the browser are updated without reloading. For NodeJS or Meteor applications, WebStorm first tries to update the application incorporating the changes without restarting the NodeJS server. Select this check box to have WebStorm try restarting the server if the changes cannot be applied automatically. After the restart, WebStorm brings you to the execution point where the problem took place. If even with this option chosen automatic upload still fails, tou will have to restart the server manually by clicking the Rerun <run configuration name> button . When the check box is cleared, WebStorm just displays a pop-up window informing you about the failure and suggesting you to restart the server manually.

Item

Description

Highlight current element in browser on caret change

When this check box is selected, the browser highlights the area that represents the code you are currently editing in WebStorm.

Update

In this area, configure the way changes made to the code during a debugging session are applied. Note that an update will now be performed only if none of the modified files have any syntax errors.

Auto in (ms): Choose this option to have the changes applied automatically at certain time interval and specify the delay in ms in the text box. This policy is not available for the client-side code of Meteor applications.
Manual: Choose this option to apply the changes manually by clicking the Update <run configuration name> JavaScript button or the Update <run configuration name> button on the toolbar of the Debug tool window.
It is recommended that you choose this option for debugging Meteor applications because applying changes to the client-side code is not supported.
Restart if hotswap fails:
With changes in HTML, CSS, and JavaScript on the client side, the contents of a Web page in the browser are updated without reloading. For NodeJS or Meteor applications, WebStorm first tries to update the application incorporating the changes without restarting the NodeJS server.
- Select this check box to have WebStorm try restarting the server if the changes cannot be applied automatically. After the restart, WebStorm brings you to the execution point where the problem took place.
  If even with this option chosen automatic upload still fails, tou will have to restart the server manually by clicking the Rerun <run configuration name> button .
- When the check box is cleared, WebStorm just displays a pop-up window informing you about the failure and suggesting you to restart the server manually.

Procedures:

Live Editing of HTML, CSS, and JavaScript

External Links:

Last modified: 11 July 2016

WebStorm 2016.1 Help

Live Edit

See Also

Procedures:

External Links: