在 HTML、CSS 和 JavaScript 中实时编辑

请确保在设置中已启用 JavaScript and TypeScript 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 插件。 在搜索字段中，键入 JavaScript 和 TypeScript。 有关插件的更多信息，请参阅 管理插件。

请确保在设置中已启用 JavaScript 调试器 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 插件。 在搜索字段中，输入 JavaScript 调试器。 有关插件的更多信息，请参阅 管理插件。

安装并启用 Live Edit 插件（在 设置 | 插件 页面上），如 从 JetBrains Marketplace 安装插件 中所述。

按照 配置 JavaScript 调试器 中的描述配置内置调试器。

要在不重新加载页面的情况下，将对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中，请启用 Live Edit 功能性。

在 设置 对话框（Ctrl+Alt+S ），转到 生成、执行、部署 | 调试器 | 实时编辑。

在打开的 实时编辑 页面上，选中 更改时在 Chrome 中更新应用程序的间隔 复选框。

默认情况下，IntelliJ IDEA 仅对 HTML 和 CSS 代码提供即时预览。 要在 JavaScript 中启用 Live Edit ，请选择 JavaScript、HTML 和 CSS 选项。

指定在编辑器中更改代码与在浏览器中显示这些更改之间的时间延迟：接受默认值 300 毫秒 或使用相应字段旁边的旋转框指定自定义值。

要启用由 Node.js 执行的 JavaScript 文件的重新加载，请选择 在更改时更新 Node.js 应用程序 复选框。 请使用微调框指定上传所需的时间，默认值为 300。

要在可以编译为 JavaScript、HTML 或 CSS 的代码中启用 Live Edit，例如在 TypeScript、Pug 或 SCSS 中，选择 跟踪编译为 JavaScript、HTML 或 CSS 的文件中的更改 复选框。

对于此类文件所做的所有更改会自动保存以触发编译，然后会在浏览器中显示。

请注意，更改的文件会在更新后不久 被保存 ，与常规的自动保存不同，后者是在关闭文件、项目或 IntelliJ IDEA，或在其他事件触发时进行的。

选中 如果 hotswap 失败，请重启 复选框，以允许 IntelliJ IDEA 在无法直接应用更改的情况下自动重新加载页面。

要配置高亮显示，请转到 高级设置 并在 调试器 区域中选中 当文本光标改变时在浏览器中高亮显示当前元素 复选框。 否则，在调试会话期间，需要按住 Shift 并在编辑器中悬停元素，在浏览器中高亮显示该元素。

开始调试会话。

根据需要更新您的 HTML、CSS 或 JavaScript 代码。 更改会立即反映在浏览器中，无需重新加载页面。