在 HTML、CSS 和 JavaScript 中进行 Live Edit

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

请确保在设置中启用了 Live Edit 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 插件。 点击 已安装 选项卡。 在搜索字段中键入 Live Edit。 有关插件的更多信息，请参阅 管理插件。

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

要使您在 HTML、CSS 或 JavaScript 代码中所做的更改能够在浏览器中立即显示而无需重新加载页面，请启用 Live Edit 功能。

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

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

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

请指定在编辑器中更改代码后，显示该更改在浏览器中所需的延时：接受默认值 300 ms ，或使用相应字段旁的微调框指定自定义值。

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

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

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

请注意，更改的文件将会在更新后 立即保存 ，这不同于因关闭文件、项目或 WebStorm 或其他事件而触发的常规自动保存。

要配置高亮显示，请选中 光标变动时高亮显示浏览器中的当前元素 复选框。 否则，在调试会话期间，您需要按住 Shift 并将鼠标悬停在编辑器中的元素上，以在浏览器中高亮显示它。

要允许 WebStorm 在无法直接应用更改时自动重新加载页面，请选中 当 hot swap 失败时重启 复选框。

启动调试会话。

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