AppCode 2019.3 Help

Live Edit in HTML, CSS, and JavaScript

With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page. Live Edit is available only during a debugging session.

Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript. You can also use Live Edit when debugging a Node.js application.

By default, Live Edit is enabled only for HTML and CSS files.

Before you start

To activate and configure Live Edit in JavaScript

  1. Install the LiveEdit plugin on the Plugins page as described in Manage plugins.

  2. In the Preferences dialog ⌘,, go to Build, Execution, Deployment | Debugger | Live Edit.

  3. On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox. This enables on-the-fly preview of HTML and CSS.

  4. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.

  5. Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value 300 ms or specify a custom value using the spin box next to the corresponding field.

  6. To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox.

    All the changes made in such files are automatically saved to trigger compilation and then appear in the browser.

    To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox.

    Note that a changed file is saved shortly after the update, contrary to regular autosave triggered by closing a file, a project, or AppCode, or by other events.

  7. To configure highlighting, select the Highlight current element in browser on caret change checkbox. Otherwise, during a debugging session, you will have to hold and click the element in the editor to highlight it in the browser.

  8. Select the Restart if hotswap fails checkbox to allow AppCode to reload the page automatically if the changes couldn't be applied without that.

Last modified: 4 December 2019