Before you startInstall the LiveEdit plugin on the Plugins settings page as described in Managing Plugins.
By default, Live Edit is disabled.
To activate and configure Live Edit
In the Settings/Preferences dialog (Ctrl+Alt+S), click Debugger under Build, Execution, Deployment, and then click Live Edit. The Live Edit page opens.
Select the Update application in Chrome on changes in checkbox. This enables on-the-fly preview of HTML and CSS.
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.
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 PyCharm to reload the page automatically if the changes couldn't be applied without that.