Live Edit Updates in WebStorm 9 — What’s New?

This post is part of a series of posts covering features in WebStorm 9 EAP:

WebStorm 9 brings a highly demanded new feature: Live Edit for Node.js. With this powerful functionality, WebStorm can now automatically update your Node.js application or restart Node.js server on any changes.
You can download WebStorm 9 EAP right now.

With changes in HTML, CSS and JavaScript code on the client side Live Edit updates the contents of your web page in the browser without reloading. When working with Node.js, Live Edit first tries to update the app incorporating your changes without restarting the Node.js server; if hotswap fails, the server is restarted.

To make Live Edit work consistently and transparently for both client-side and server-side code, we’ve significantly reworked Live Edit configurations.

Let’s have a closer look at new Live Edit.

To use Live Edit, start a JavaScript or Node.js debug session. Accordingly, all Live Edit configurations are available in Preferences | Debugger | Live Edit.

Live Edit can work in two different modes: Auto or Manual.

liveeditconfig

The Manual mode is enabled by default. Start your debug session and make some changes in the code. To try the changes in action, click the Update Application button updateRunningApplication on the debugger tool window or in the main Run menu, or press Ctrl+F10 on Windows and Linux (or cmd+F10 on Mac OS).

updaterestart

updatesuccess

Please note that an update will now be performed only if none of the modified files have any syntax errors. Previously, Live Edit would update the page even when some other modified files had errors.

In the Auto mode, the Update Application action is performed automatically. You can configure the delay before the update (300 ms by default) in Preferences | Debugger | Live Edit.

The check-box Restart if hotswap failed configures the Live Edit behavior for situations when changes in the code require a server restart (in case of Node.js) or a browser reload (in case of client-side code). If it is not selected, you will be notified that a restart required and will be able to do it manually.

Note that right now changes in HTML code will be updated in the browser automatically regardless of the selected Update mode.

In the following updates of Live Edit, we will add the ability to select different Update modes by file wildcards. For example, you will be able to select Auto mode for all CSS files by adding a rule for *.css, while still using manual updates for all *.js files.

Go ahead and try the updated Live Edit in action! If you haven’t used it before, have a look at our helpful tutorial, Getting started with Live Edit.

We would appreciate your feedback and bug reports on new Live Edit functionality here and in our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

This entry was posted in Cool Feature. Bookmark the permalink.

31 Responses to Live Edit Updates in WebStorm 9 — What’s New?

  1. Pingback: WebStorm 9 EAP is Open! | JetBrains WebStorm Blog

  2. Sadi says:

    No Love for ReactJS ?

    I am having issues with the XML syntax. :S

  3. Pingback: JavaScript Postfix Completion | JetBrains WebStorm Blog

  4. Pingback: Tracing, debugging and profiling Node.js with spy-js | JetBrains WebStorm Blog

  5. Rob says:

    What sort of things can be hotswapped into Node? So far everything I’ve changed still requires a server restart.

  6. Matt Williams says:

    Will this feature be available in IDEA 14? Its not present in the EAP.

    • Vladimir Krivosheev says:

      LiveEdit is not bundled, you need to install, Settings -> Plugins -> Browse Repositories -> type in LiveEdit

  7. Pingback: Meteor Support in WebStorm 9 | JetBrains WebStorm Blog

  8. Pingback: WebStorm 9 EAP, 138.2406: spy-js code completion, CSS3 enhancements, Scratch files and… JSX | JetBrains WebStorm Blog

  9. Duc Nguyen says:

    How can I use Live Edit with my APIs come from Tomcat server (UI: AngularJS) while I start debug my project, webstorm 8 start new chrome window

    • Ekaterina Prigara says:

      Do you want to use Live edit for your client-side code, right?

    • Pascal Salg says:

      Hi,
      I too am interested in this. Our Java Backend is running on tomcat (managed by eclipse), we currently are switching to webstorm for the angular frontend.

      But with this setup, interacting with the application is not really possible as requests for RESTful web services are routed to localhost:63342 (tomcat is listening on port 8080) and thus are not reachable for the angular UI.

      • Ekaterina Prigara says:

        To use Live edit feature for your client-side code, you need to create a JavaScript debug configuration where you can specify the URL to debug that would be http://localhost:8080/ in your case. If the project is in Tomcat’s webroot or you have automatic deployment configured in WebStorm, then all should work fine.

  10. Brennan says:

    I’ve created a new project with node.js express as the project type. When trying Live Edit with Chrome I’m seeing immediate changes when updating jade files. The style.css however requires I press the ‘Update Application’ button, checking restart if hotswap fails doesn’t fix this and I don’t get a notification that it failed. Is this correct behaviour? Or is there something wrong with the default setup in the project type? I did notice if I update the CSS file first and then the Jade file, when the Jade triggers an update the CSS file will also be reloaded.

    When altering index.js in the routes folder, changing the title does nothing unless I physically refresh, I’ve had both JS and remote node debug configs enabled. Is there documentation on what file types work with Live Edit and what locations are being watched?

  11. Blair Morris says:

    If we already used something like grunt-contrib-watch to do auto-reloading, will it have conflicts? It sounds as if the new feature is turned on by default.

    • Ekaterina Prigara says:

      grunt-contrib-watch actually executes your grunt tasks on file changes. Whether it causes conflicts with Live Edit depends on what kind of tasks are executed.

  12. Sergey says:

    Hi, Ekaterina
    You mentioned: In the following updates of Live Edit, we will add the ability to select different Update modes by file wildcards. For example, you will be able to select Auto mode for all CSS files by adding a rule for *.css, while still using manual updates for all *.js files.

    When that awesome feature will be implemented? Will it help with following issue – https://youtrack.jetbrains.com/issue/WEB-14341 or has to be fixed separately?

    Thank you

    • Vladimir Krivosheev says:

      >> When that awesome feature will be implemented?
      It depends on your feedback :) Now we got it. Probably WebStorm 10.

      WEB-14341 is not related, will be fixed separately.

  13. Juan says:

    Where is Preferences in Windows??

  14. Hi, I’m going countercurrent and I would like to use liveedit only on demand.

    There’s a change to use liveedit only to reload browser windows on demand (with a shortcut) without leaving the ide and not when saving?

    After years of programming I’ve developed an habit to press many times “ctrl+s” during editing, but that doesn’t mean I want to reload the page every time.

    • Vladimir Krivosheev says:

      You can disable auto update (Settings -> Build, -> Debugger -> Live Edit -> Set Update to Manual), but HTML editing not yet support manual update.

  15. Gregg Casey says:

    On mac at least it is:
    Preferences | Build, Execution, Deployment | Debugger | Live Edit.
    not
    Preferences | Debugger | Live Edit.

    And, if you are working in Node.js, turn on auto

  16. LAU says:

    Does it support reactjs?
    I’m getting this error whenever I updated my react component:

    Failed to compile new version of script: SyntaxError: Unexpected token import

Leave a Reply

Your email address will not be published. Required fields are marked *