This feature is only supported in the Ultimate edition.

In this section:

Introduction

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.

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

Before you start

  1. Install and enable the LiveEdit plugin. The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
  2. Make sure the JetBrains Chrome Extension is installed in your Chrome browser, see Installing JetBrains Chrome extension.

Configuring the Live Edit update policy in the debugging mode

In the debugging mode, IntelliJ IDEA provides the Live Edit functionality which supports both automatic and manual upload of updated files on the server side. For the client side, Live Edit does not provide any way to apply the changes.

In Meteor projects, the client-side code can be updated through the native Meteor hot code pushes functionality. See Meteor for details.

To configure the Live Edit update policy in the debugging mode
  1. Open the Settings / Preferences Dialog by pressing ⌘,⌘,⌘,⌥F7⌃⌥S or by choosing File | Settings for Windows and Linux or IntelliJ IDEA | Preferences for macOS. Expand the Debugger node under Build, Execution, Deployment, and then click Live Edit.
  2. 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> JavaScript button ../../Shared/update_icon.png or the Update <run configuration name> button ../../Shared/update_icon.png 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:

      With changes in HTML, CSS, and JavaScript on the client side, the contents of a Web page in the browser are updated without reloading. For Node.js or Meteor applications, IntelliJ IDEA first tries to update the application incorporating the changes without restarting the Node.js server.

      • Select this check box to have IntelliJ IDEA try restarting the server if the changes cannot be applied automatically. After the restart, IntelliJ IDEA 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 ../../Shared/run.png.

      • When the check box is cleared, IntelliJ IDEA just displays a pop-up window informing you about the failure and suggesting to restart the server manually.

Live Editing during a debugging session

During a debugging session with Live Edit, the Chrome extension listens to the port of the JetBrains IDE from which the extension was invoked. Each IDE including IntelliJ IDEA has its own default port on which it starts.

To perform Live Editing during a debugging session

  1. 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 for the affected areas, open the Build, Execution, Deployment | Debugger | - Live Edit page of IntelliJ IDEA preferences (⌘,⌘,⌘,⌥F7⌃⌥S) , and then select Highlight current element in browser.

  2. To initiate a debugging session, create a run configuration of the type JavaScript Debug and click the Debug button ../../Shared/debug.png on the toolbar. IntelliJ IDEA establishes connection with the JetBrains Chrome extension and starts a debugging session.
  3. 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.

Overriding the default CORS settings

Suppose the page you are debugging with Live Edit requests a resource which is, for security reasons, protected against access through CORS settings. You can enable access to the protected resources by changing the Chrome extension options.

To override the default CORS settings

  1. Right-click ../../Shared/chrome_extenstion_jb_icon.png and choose Options on the context menu. A web page with Chrome extension options opens showing the parameters to connect to IntelliJ IDEA.
  2. In the Force CORS text box, type the pattern that defines the URL addresses you want to make accessible, for example: http://youtrack.jetbrains.com/rest/*.

See Also

Procedures:

Reference: