LiveEdit

Compatible with: IntelliJ IDEA PhpStorm WebStorm PyCharm RubyMine AppCode CLion GoLand Rider
Dec 06, 2018
3 668 161

With Live Edit you can see the changes you made in your HTML and CSS files immediately in the browser.
Live Edit can also restart your Node.js application automatically on changes.

Getting started

  • Install the JetBrains IDE Support extension for Chrome.
  • In the IDE preferences, go to Build, Execution, Deployment | Debugger | Live Edit and check Update application in Chrome.
  • In the editor, open the HTML file you want to “live edit” and in its context menu select Debug.

This will start a JavaScript debugger in WebStorm and open your file in Chrome. As you start editing your HTML code or the linked CSS file, you will see the changes you make in the browser, without ever having to reload the page.


Learn more about Live Edit in the IDE documentation.


Using Live Edit with Node.js

  • In the IDE preferences, go to Build, Execution, Deployment | Debugger | Live Edit and enable Update Node.js application on changes and Restart if hotswap fails.
  • Create a new Node.js run/debug configuration and specify the JavaScript file that starts your app in it.
  • Start the configuration in the debug mode.

Some changes in the code will be pushed to the app without a restart. On bigger changes, the IDE will restart the running application automatically.

Download plugin