Currently the Live Edit functionality is supported only for Google Chrome and only during a debugging session.
On this page:
- Configuring the Live Edit update policy in the debugging mode
- Live editing during a debugging session
The LiveEdit plugin is installed and enabled.
The plugin is not bundled with PhpStorm, but it is available from the PhpStorm plugin repository. Once enabled, the plugin is available at the IDE level, that is, you can use it in all your PhpStorm projects.
The JetBrains Chrome Extension is installed in your Chrome browser.
The extension is installed when you first initiate a debugging session and follow the dedicated link provided by PhpStorm. For details, see Using JetBrains Chrome Extension and http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension.
In the debugging mode, PhpStorm provides the Live Edit functionality. For the server side, PhpStorm supports both automatic and manual upload of updated files. For the client side, PhpStorm does not provide any way to apply the changes and displays a pop-up window with the following message: Update for Meteor client-side source files is not available.
- Open the Settings dialog box by choosing or pressing Ctrl+Alt+SCtrl+Alt+SCtrl+Alt+SCtrl+Alt+SCtrl+Alt+SAlt+F7Ctrl+Alt+SCtrl+Alt+SCommand CommaCommand CommaCommand Comma. Expand the Debugger node under Build, Execution, Deployment, and then click Live Edit. The Live Edit page that opens.
In the Update area,
configure the way changes made to the code during a debugging session are applied.
Note that an update will now be performed only if none of the modified files have any syntax errors.
- Auto in (ms): Choose this option to have the changes applied automatically at certain time interval and specify the delay in ms in the text box. This policy is not available for the client-side code of Meteor applications.
Manual: Choose this option to apply the changes manually by clicking
the Update <run configuration name> button on the toolbar of the Debug tool window.
It is recommended that you choose this option for debugging Meteor applications because applying changes to the client-side code is not supported.
Restart if hotswap fails:
Select this check box to have PhpStorm try restarting the server if the changes cannot be applied automatically.
After the restart, PhpStorm brings you to the execution point where the problem took place.
If even with this option chosen automatic upload still fails, tou will have to restart the server manually by clicking the Rerun <run configuration name> button .
- When the check box is cleared, PhpStorm just displays a pop-up window informing you about the failure and suggesting you to restart the server manually.
- Select this check box to have PhpStorm try restarting the server if the changes cannot be applied automatically. After the restart, PhpStorm brings you to the execution point where the problem took place.
- Although Live Editing is supported only in the debug mode, it is convenient to activate it in advance so the functionality is available immediately as soon as you start a debugging session. To activate the Live Edit, do one of the following:
- When editing the code and monitoring how the changes are rendered in the browser, it is helpful to have the areas affected by the changes highlighted. To enable highlighting affected areas, open the PhpStorm settings dialog box, click Live Edit, and then select the Highlight current element in browser check box on the Live Edit page that opens.
- Edit the HTML file that implements the page opened in the browser and view the changes immediately rendered.
PhpStorm supports an operation that is somehow opposite to live editing. During a debugging session, the Elements tab of the Debug tool window shows the HTML source code that implements the actual browser page and its HTML DOM structure. Moreover, any changes made to the page through the browser are immediately reflected in the Elements tab. For more details, see Viewing Actual HTML DOM.