PyCharm 2019.3 Help

Live Edit

File | Settings | Build, Execution, Deployment | Debugger | Live Edit for Windows and Linux
PyCharm | Preferences | Build, Execution, Deployment | Debugger | Live Edit for macOS
Ctrl+Alt+S the Settings/Preferences icon

Use this page to enable and disable Live Edit in HTML, CSS, and JavaScript and configure the appearance of the on-the-fly preview.



Update Node.js application on change

Select this checkbox to enable reloading of JavaScript files that are executed by Node.js. Use the spin box to specify the elapsed time for upload, the default value is 300.

Update application in Chrome on changes in

Select this checkbox to enable on-the-fly preview of HTML and CSS.

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

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

Track changes in files compiled to JavaScript, HTML or CSS

Select this option to enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS.

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 PyCharm, or by other events.

Highlight current element in browser on caret change

When this checkbox is selected, the current element is highlighted when you move the cursor. Otherwise, during a debugging session, you have to hold Shift and click the element to highlight.

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 Node.js or Meteor applications, PyCharm first tries to update the application incorporating the changes without restarting the server.
  • Select this checkbox to allow PyCharm to reload the page automatically if the changes couldn't be applied without that.

    If even with this option chosen automatic reload still fails, you will have to restart the server manually by clicking the Rerun <run configuration name> buttonRun.

  • When the checkbox is cleared, PyCharm just displays a popup informing you about the failure and suggesting to restart the server manually.

Use JetBrains IDE Support extension for debugging and Live Edit

If you select this checkbox, 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.

Last modified: 2 April 2020