This tutorial describes configuration and workflow with Live Edit feature in WebStorm.
Watch on YouTube
Note: the list of supported browsers includes only Google Chrome, Chrome Canary and Dartium.
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.
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.
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.
Note: make sure that the View | Live Edit option is selected.
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.
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.
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)?
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.