GoLand 2025.3 Help

在 HTML、CSS 和 JavaScript 中实时编辑

借助 实时编辑 功能,您对 HTML、CSS 或 JavaScript 代码所做的更改会立即在浏览器中显示,而无需重新加载页面。

Live Edit 适用于包含或生成 HTML、CSS 或 JavaScript 的其他文件类型。 在 调试 Node.js 应用程序 时,您也可以使用 实时编辑。 如需了解更多信息,请参阅 Node.js 应用程序中的实时编辑

默认情况下, Live Edit 仅对 HTML 和 CSS 文件启用。

在开始之前

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

  2. 请确保在设置中已启用 JavaScript 调试器 捆绑插件。 按下 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,输入 JavaScript Debugger。 有关插件的更多信息,请参阅 插件管理

  3. 设置 | 插件 页面、 Marketplace 选项卡上安装并启用 Live Edit 插件,如 从 JetBrains Marketplace 安装插件 中所述。

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

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

激活并配置 JavaScript 中的 Live Edit

  1. 设置 对话框(Ctrl+Alt+S ),转到 生成、执行、部署 | 调试器 | 实时编辑

  2. 在打开的 实时编辑 页面上,选中 在 Chrome 中根据更改更新应用程序 复选框。

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

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

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

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

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

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

  7. 要配置高亮显示,请选中 在文本光标变化时在浏览器中高亮显示当前元素 复选框。 否则,在调试会话期间,您将不得不按住 Shift 并在编辑器中将鼠标悬停在元素上以在浏览器中高亮显示它。

  8. 选择 如果 hotswap 失败,请重启 复选框以允许 GoLand 在更改无法直接应用时自动重新加载页面。

使用 Live Edit

  1. 开始调试会话

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

最后修改日期: 2025年 12月 5日