PhpStorm 2019.1 Help

Live Edit in HTML, CSS, and JavaScript

With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page. Live Edit is available only during a debugging session.

Before you start

Install the LiveEdit plugin on the Plugins page as described in Managing plugins.

By default, Live Edit is disabled.

To activate and configure Live Edit

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Debugger under Build, Execution, Deployment, and then click Live Edit. The Live Edit page opens.

  2. Select the Update application in Chrome on changes in checkbox. This enables on-the-fly preview of HTML and CSS.

  3. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.

  4. Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value 300 ms or specify a custom value using the spin box next to the corresponding field.

  5. To configure highlighting, select the Highlight current element in browser on caret change checkbox. Otherwise, during a debugging session, you will have to hold Shift and click the element in the editor to highlight it in the browser.

  6. Select the Restart if hotswap fails checkbox to allow PhpStorm to reload the page automatically if the changes couldn't be applied without that.

Last modified: 8 July 2019

See Also