|This tutorial covers using Live Edit in PhpStorm to view code changes simultaneously in the browser.
The list of supported browsers currently includes Google Chrome, Chrome Canary, and Dartium.
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.
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.
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). A Run/Debug configuration will be created, and the file will be opened in the browser.
Otherwise, 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:
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:
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:
Code completion is also live:
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.
You can also assign a keyboard shortcut (for example ⌃+R on Mac OS X) in Settings | Keymap to easily invoke this action whenever needed.
A detailed troubleshooting guide can be found in the WebStorm space.
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.