Currently the Live Edit functionality is supported only for Google Chrome and only during a debugging session.
On this page:
- The LiveEdit plugin is enabled. The plugin is bundled with WebStorm and activated by default. If it is not, enable the plugin.
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 WebStorm. For details, see Using JetBrains Chrome Extension and http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension.
- 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 WebStorm 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.
WebStorm 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.
- Viewing Actual HTML DOM
- Previewing Pages with Web Contents in a Browser
- Viewing Pages with Web Contents