Skip to end of metadata
Go to start of metadata

This tutorial covers using Live Edit in PhpStorm. 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.

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

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

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. Using Node.js, Live Edit tries to update the app with your changes without restarting the Node.js server. If hotswap fails, the server is restarted.

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.

Prerequisites

There are some prerequisites to working with Live Edit. You will have to install the Live Edit plugin, as well as a browser extension.

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

Live Edit works using a browser plugin. Currently, only Google Chrome, Chrome Canary and Dartium are supported. Extensions for Firefox & Safari will be added later.

The Chrome extension will be installed automatically if the 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.

The following steps can be followed to install the Chrome extension:

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.

Client-Side Live Edit

Live Edit can update the contents of your browser with the changes made in the IDE, without reloading the page.

Creating and Starting a JavaScript Debug Session (JavaScript Run/Debug Configuration)

In order to start a JavaScript Debug Session, a Run/Debug configuration has to be created first. This can be done automatically using the Debug file_name context menu, or manually if you want to specify additional options.

Automatically generate JavaScript Run/Debug Configuration

You can automatically create a 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). A Run/Debug configuration will be created, and the file will be opened in the browser.

Manually create JavaScript Run/Debug Configuration
You can create a Run/Debug Configuration manually:

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

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. This will launch the browser and enable Live Edit.

In PhpStorm 7, make sure that the View | Live Edit option is selected. This option has to be enabled for the IDE to connect to the Live Edit browser extension.

Inspect in PhpStorm 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 the page opens, select Inspect in PhpStorm from the context menu:

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 the context menu or on the toolbar) and the file will be opened in Chrome.

From now on, any changes you do 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 the 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.

Node.js Live Edit

When using Live Edit with Node.js ad making changes to code, the IDE will try and incorporate these changes into the running Node.js application. If this fails, it will restart the Node.js server.

Creating and Starting a Node.js Debug Session (Node.js Run/Debug Configuration)

In order to be able to start a Node.js Debug Session, a Run/Debug configuration has to be created first. This can be done automatically using the Debug file_name context menu, or manually if you want to specify additional options.

Automatically generate Node.js Run/Debug Configuration

You can automatically create a Run/Debug Configuration and run Debug Session for any JavaScript 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). A Run/Debug configuration will be created, and the file will be run using the configured Node.js interpreter.

Manually create Node.js Run/Debug Configuration
You can create a Run/Debug Configuration manually:

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

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

3. Provide a Name for the configuration and the JavaScript file you would like to run:

Since Node.js applications can be both server-side as well as client-side, you can use the Browser/Live Edit tab to set-up client-side Live Edit at once. Pick the browser that should be launched, enter the URL to the application (e.g. http://localhost:300) and tick the with JavaScript debugger if you also want to use client-side JavaScript debugging. Once saved, this Run/Debug Configuration allows debugging server-side Node.js and client-side JavaScript at the same time. PhpStorm will create a new JavaScript Debug Configuration which can be run separately as well.

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. This will launch the application and enable Live Edit.

Using Live Edit

Once a Node.js Debug Session has been started, you can change Node.js code while it is running. Depending on the Live Edit Settings, you will either have to manually update the running application or let PhpStorm update it for you.

The Manual mode is enabled by default. After starting a debug session, you can update code and click the  (Update application) button from the debug tool window or press Ctrl+F10 (CMD+F10 on Mac OS X). In Automatic mode, the IDE will update the application after a configured interval when changes have been detected.

If PhpStorm can update the code without having to restart the application, it will do so. Otherwise, the IDE will notify us and propose to restart the application.

It's also possible to automatically restart the application when the so-called hotswap fails. This can be done through the Live Edit Settings.

Please note that an update will only be performed only if none of the modified files have any syntax errors. This ensures the application will work correctly.

Live Edit Settings

Under IDE Settings | Debugging | Live Edit, you can configure the behavior of Live Edit.

By default, Manual mode will be enabled. This requires us to manually click the Update application button in order to load code changes. The Automatic mode will do this automatically at the configured interval (300ms by default).

Ticking the Restart if hotswap failed checkbox 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 is required and will be able to do it manually. When checked, the IDE will perform the restart for you.

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.

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.

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").

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

1. Open chrome://extensions/

2. 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.