Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

This tutorial describes configuration and workflow with Live Edit feature in WebStorm.

What is Live Edit?

Live Edit gives you an opportunity to see all the changes you make in your HTML and CSS files instantly in a browser without refreshing the page. Just install the extension for Google Chrome and, as you edit HTML, CSS or JavaScript in WebStorm, Live Edit will push your changes to the browser without reloading the page and highlight the elements you are working on. Completion lookup is also live.

Live Edit also supports SASS, LESS, CoffeeScript, TypeScript, etc. (a configured file watcher is needed). CSS and JavaScript (including any other language that can be transpiled to CSS or JavaScript) will be hot-swapped without a page refresh. Hot-swapped JavaScript will be effective only if it used in cycle or event-driven.

Note: the list of supported browsers includes only Google Chrome, Chrome Canary and Dartium.

Installing Google Chrome extension

To use Live Edit you need to install JetBrains IDE support for Google Chrome.

The Google Chrome extension JetBrains IDE Support is available in Chrome Web Store. It can be installed for free. A browser restart is not required.

1. Open the Chrome Web Store and navigate to JetBrains IDE Support extension. Click the + button.

2. 'Add JetBrains IDE Support' popup will appear, listing permissions asked by the extension. Click Add.

3. The extension has been installed! No reboot is required. A popup with confirmation will appear and extension icon will appear near the search bar.

Starting JavaScript debug session

To start using Live Edit you need to start a JavaScript debug session for any html file.

To start the JavaScript debugger, select Debug file from the context menu of any html file (or in the context menu of the editor when the file is opened).

A new Run/Debug configuration will be created automatically, the debug session will start and file will be opened in the browser.

Otherwise, you can create a Run/Debug Configuration manually:

1. Click the drop-down list at the top right-hand corner of the IDE window and select Edit configuration. Alternatively, this action is also available in the main WebStorm menu Run.

2. Click ‘+’ to add a new JavaScript Debug configuration.

3. Provide the URL you would like to use Live Edit for: select the html file path (then WebStorm will use its built-in web server to serve it) or a page address on any other web server.

Once configured, we can start the JavaScript Debug session by clicking Debug at the top right.

Note: make sure that the View | Live Edit option is selected.

Using Live Edit

Place WebStorm and Chrome on your screen in such a way that you can see both applications to take advantage of Live Edit instant changes.
Click the Debug button to run a JavaScript Debug Session and the file will be opened in Chrome.

From now on, any changes you perform will be instantly shown in Google Chrome browser without a page reload. For example, you can edit text, manipulate colors to find one that suits you best, etc. Any CSS/JavaScript used by the file you are debugging will be instantly updated as well.

  • No labels