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

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|http://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session], 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.

Inspect in WebStorm action

Alternatively, open the page you'd like to edit in Chrome by selecting Open in Browser from the context menu of the html file.

When page opens, select Inspect in IDE from the context menu.

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 or use Inspect in IDE action.

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.

Troubleshooting

First of all, check that all actions listed under Installing Google Chrome extension and Starting JavaScript debug session sections of this tutorial have been performed.

1. I get the message "Internal HTTP server disabled. Cannot start internal HTTP server. Git integration, JavaScript debugger and LiveEdit may operate with errors..."

The IDE failed to bind to port 63342. Please check your firewall settings and restart the IDE.

2. I get the message in Chrome log: "System latest connected to xxx.xxx (127.0.0.1:63342)", but LiveEdit is not working.

Probably there is another instance of a JetBrains IDE running, meaning that port 63342 is already bound. Please check that the product name corresponds to your IDE (where "xxx" stands for the build number, e.g. "126.159").

3. How do I configure an IDE connection (IDE port)?

Open chrome://extensions/

Scroll down to the section JetBrains IDE Support and click Options.

OR, right-click the JB browser icon and select Options.

4. How to enable logging?

Please see the instructions on this page.

  • No labels