在 HTML、CSS 和 JavaScript 中实时编辑

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

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

安装并启用 Live Edit插件，此页面的 设置 | 插件Marketplace 选项卡中，有关详细信息，请参阅 从 JetBrains Marketplace 安装插件。

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

为了让您对 HTML、CSS 或 JavaScript 代码所做的更改在不重新加载页面的情况下立即显示在浏览器中，请激活 Live Edit功能。

在 设置 对话框 (Ctrl+Alt+S) 中，前往 生成、执行、部署 | 调试器 | 实时编辑。

在打开的 Live Edit 页面中，选中 在 Chrome 中根据更改更新应用程序 复选框。

默认情况下，PhpStorm 仅对 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 的文件中的更改 复选框。

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

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

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

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

开始调试会话。

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