Skip to end of metadata
Go to start of metadata
This tutorial covers Live Edit in PhpStorm 7 and later versions. Live Edit configuration and usage workflow have been significantly re-worked for PhpStorm 7 / WebStorm 7 (build numbers greater than 130.1090). If you are using PhpStorm/WebStorm 6 or earlier, please check out this blog post.

For Live Edit to work correctly, you should run a Debug Session following this tutorial (automatically - running debug session from the context menu, or configuring run/debug configuration manually).

All the demonstration videos in this tutorial assume that you have the Live Edit plugin, Chrome Extension installed, JavaScript Run/Debug Configuration set up, and a debugging session running.

The list of supported browsers currently includes only Google Chrome.

What is Live Edit? 

Live Edit gives you an opportunity to see all the changes instantly in a browser without refreshing the page. Just install the browser extension and, as you edit HTML, CSS or JavaScript in PhpStorm, Live Edit will reload the corresponding browser pages 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.

Live Edit configuration and usage workflow have been significantly re-worked for PhpStorm 7 / WebStorm 7. To make its behavior more predictable, we are now enabling it only within a JavaScript debug session, so Run/Debug Configuration should be configured first.

Live Edit Plugin Installation

To install Live Edit plugin in PhpStorm, go to Settings | Plugins | Install JetBrains Plugin... and find the Live Edit plugin. Click the button or select Download and Install from the context menu to install the plugin.

Apply your changes and restart the IDE.

Live Edit plugin is bundled with WebStorm - no plugin installation is needed.

Chrome Extension Installation

The list of supported browsers currently includes only Google Chrome; extensions for Firefox & Safari will be added later.

Chrome extension will be installed automatically if Chrome Browser is not running during the first launch of the IDE with the Live Edit plugin installed.

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 additional information will appear.

JavaScript Run/Debug Configuration in PhpStorm

You can automatically create Run/Debug Configuration and run Debug Session for any HTML file by clicking Debug file_name item in the file context menu (or in the context menu of the editor when the file is opened). Run/Debug configuration will be created, file will be opened in the browser.

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

1. Go to Run | Edit Configurations or select Select Run/Debug Configurations | Edit Configurations in the toolbar:

2. Add a new JavaScript Debug Configuration by clicking the + button:

3. Provide a Name for the configuration and the URL you would like to use Live Edit for:
Please note that URL can be the file path (e.g. /Users/user/PhpstormProjects/bootstrap_le/examples/jumbotron/index.html in our case) or a page address on a web server (e.g. http://localhost:63342/bootstrap_le/test.php if you use a built-in web server).

After a Run/Debug configuration is created (either automatically or manually), it can be selected in the Select Run/Debug Configuration field in the toolbar. To run the debugger, click the  button. From the moment Debugging Session for the file is running, Live Edit works the same way as it used to work before configuration with JS Run/Debug Configuration was introduced.

Make sure that the View | Live Edit option is selected:

Using Live Edit

Place PhpStorm 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 (in context menu or on the toolbar) 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. 

Code completion is also live:

Reload in Browser

When you are editing your PHP file or Smarty/Twig template, it is very annoying to switch to the browser and reload tab manually. Clearly, Live Edit instant changes preview would be impossible to implement for server-side PHP or compilable Smarty and Twig templates (because the PHP file should be re-run to get results, and that cannot be done from the browser side). For this reason Live Edit includes a Reload in Browser feature which allows you to reload pages in-browser, right from PhpStorm.

To get Reload in Browser to work with your files, you need to configure a JavaScript Run/Debug Configuration for the file you are going to invoke (in case of Smarty/Twig or PHP, simply provide a web server URL such as http://localhost:63342/bootstrap_le/test.php in the URL field of your new JavaScript Run/Debug Configuration).

When the session is started, View | Reload in Browser action can be invoked to reload all the pages with an active JavaScript Debug Session in the browser.

You can also assign a keyboard shortcut (for example ⌃+R on Mac OS X) in Settings | Keymap to easily invoke this action whenever needed.

Troubleshooting

First of all, check that all actions listed under Live Edit Plugin Installation, Chrome Extension Installation, and JavaScript Run/Debug Configuration in PhpStorm sections of this tutorial have been performed.

A detailed troubleshooting guide can be found in the WebStorm space.

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.

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.