HTML、CSS 和 JavaScript 中的实时编辑

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

按照 从 JetBrains Marketplace 安装插件 中的说明，在 设置 | 插件 页面， 插件市场 选项卡上安装 JavaScript 调试器 和 Live Edit 插件。 插件仅在 PyCharm 专业版中可用。

按照 配置 JavaScript 调试器 中的说明配置内置调试器。

要使您对 HTML、CSS 或 JavaScript 代码所做的更改在无需重新加载页面的情况下立即显示在浏览器中，请启用 实时编辑 功能。

在 设置 对话框（Ctrl+Alt+S ），转到 构建、执行、部署 | 调试器 | Live Edit。

在打开的 Live Edit 页面上，选中 在以下内容更改时在 Chrome 中更新应用程序 复选框。

默认情况下，PyCharm 仅对 HTML 和 CSS 代码显示即时预览。 要在 JavaScript 中启用 实时编辑 ，请选择 JavaScript、HTML 和 CSS 选项。

指定在编辑器中更改代码与在浏览器中显示此更改之间的延迟时间：接受默认值 300 ms ，或使用相应字段旁边的微调框指定自定义值。

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

要在可编译为 JavaScript、HTML 或 CSS 的代码（例如 TypeScript、Pug 或 SCSS）中启用实时编辑，请选中 跟踪编译为 JavaScript、HTML 或 CSS 的文件中的更改 复选框。

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

请注意，与由关闭文件、项目或 PyCharm 等事件触发的常规自动保存不同，更改的文件会 在更新后不久保存。

选中 热替换失败时重新启动 复选框，以允许 PyCharm 在无法直接应用更改时自动重新加载页面。

要配置高亮显示，请转到 高级设置 ，并在 调试器 区域选中 在插入符号更改时在浏览器中高亮显示当前元素 复选框。 否则，在调试会话期间，需要按住 Shift ，并将鼠标悬停在编辑器中的元素上，以在浏览器中高亮显示它。

启动调试会话。

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