By default, Live Edit is enabled only for HTML and CSS files.
Before you start
In the Settings/Preferences dialog Ctrl+Alt+S, go to .
On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox.
Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value
300 msor specify a custom value using the spin box next to the corresponding field.
All the changes made in such files are automatically saved to trigger compilation and then appear in the browser.
Note that a changed file is saved shortly after the update, contrary to regular autosave triggered by closing a file, a project, or PhpStorm, or by other events.
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.
Select the Restart if hotswap fails checkbox to allow PhpStorm to reload the page automatically if the changes couldn't be applied without that.
By default, Live Edit works without the JetBrains Chrome Extension. If you still want to use it, select the Use JetBrains IDE Support extension for debugging and Live Edit checkbox. In this case, you need to install and activate the JetBrains Chrome Extension as described in Installing the JetBrains Chrome Extension and Activating, de-activating, and uninstalling JetBrains Chrome extension.