IntelliJ IDEA 13.1 Web Help

During a JavaScript debugging session, you can monitor how the changes you make in the HTML file are rendered in the actual browser window without refreshing the page manually and even without leaving IntelliJ IDEA. All the changes you make are immediately reflected in the browser and the affected area is highlighted. Besides pure HTML files, this also works for other file types that contain or generate HTML, CSS, or JavaScript. You just need to specify the URL of the page in the JavaScript Debug run configuration. The live contents of the page being edited are shown in the Elements tab of the Debug tool window.

Note

Currently the Live Edit functionality is supported only for Google Chrome and only during a debugging session.

On this page:

Prerequisites

  1. The LiveEdit plugin is installed and enabled.

    The plugin is not bundled with IntelliJ IDEA, but it is available from the JetBrains plugin repository. Once enabled, the plugin is available at the IDE level, that is, you can use it in all your IntelliJ IDEA projects.

  2. 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 IntelliJ IDEA. For details, see Using JetBrains Chrome Extension and http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension.

Live editing during a debugging session
  1. 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:
    • On the main menu, choose View, then select Live Edit.
    • Open the IntelliJ IDEA settings dialog box, click Live Edit, and then select the Enable live editing check box on the Live Edit page that opens.
  2. 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 IntelliJ IDEA settings dialog box, click Live Edit, and then select the Highlight current element in browser check box on the Live Edit page that opens.
  3. To initiate a debugging session, create a run configuration of the type JavaScript Debug and click the Debug button debug on the toolbar. IntelliJ IDEA establishes connection with the JetBrains Chrome extension and starts a debugging session.
  4. Edit the HTML file that implements the page opened in the browser and view the changes immediately rendered.

IntelliJ IDEA 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.

See Also

Procedures:

Reference:

External Links:

Web Resources: