# 在 HTML、CSS 和 JavaScript 中实时编辑

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript` 、  `JavaScript Debugger` ：这些插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `实时编辑` ：在   设置 | 插件   页面上安装插件。

> **Note:**
> * Live Edit 仅在调试会话期间可用。 更多信息请参阅 [在 Chrome 中调试 JavaScript](debugging-javascript-in-chrome.html)。
>
> * JavaScript 代码的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [Chromium-based browsers](https://www.chromium.org/)中受支持。

借助  Live Edit  功能性，对 HTML、CSS 或 JavaScript 代码所做的更改会立即显示在浏览器中，而无需重新加载页面。

![在 HTML 和 CSS 中实时编辑](https://resources.jetbrains.com/help/img/idea/2026.3/live_edit_example_html_css.animated.gif)

Live Edit  适用于包含或生成 HTML、CSS 或 JavaScript 的其他文件类型。 在 [调试 Node.js 应用程序](running-and-debugging-node-js.html)时，您还可以使用  Live Edit 。 如需了解更多信息，请参阅 [Node.js 应用程序中的实时编辑](live-editing-in-node-js-applications.html)。

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

## 开始之前

Procedure:

1. 请确保在设置中已启用  JavaScript and TypeScript  捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

2. 请确保在设置中已启用  JavaScript 调试器  捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，输入  JavaScript 调试器 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

3. 安装并启用  Live Edit  插件（在   设置 | 插件   页面上），如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中所述。

4. 按照 [配置 JavaScript 调试器](configuring-javascript-debugger.html)中的描述配置内置调试器。

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

## 激活并配置 JavaScript 中的 Live Edit

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `生成、执行、部署 | 调试器 | 实时编辑` 。

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

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

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

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

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

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

请注意，更改的文件会在更新后不久 [被保存](saving-and-reverting-changes.html)，与常规的自动保存不同，后者是在关闭文件、项目或 IntelliJ IDEA，或在其他事件触发时进行的。

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

8. 要配置高亮显示，请转到  `高级设置`  并在   调试器   区域中选中   当文本光标改变时在浏览器中高亮显示当前元素   复选框。 否则，在调试会话期间，需要按住 `Shift` (Windows), `Shift` (macOS), `Shift` (IntelliJ IDEA Classic (macOS)), `Shift` (macOS System Shortcuts), `Shift` (XWin), `Shift` (GNOME), `Shift` (KDE), `Shift` (Emacs), `Shift` (Sublime Text), `Shift` (Sublime Text (macOS)), `Shift` (Visual Studio), `Shift` (Visual Studio (macOS)), `Shift` (NetBeans), `Shift` (Eclipse), `Shift` (Eclipse (macOS)) 并在编辑器中悬停元素，在浏览器中高亮显示该元素。

## 使用 Live Edit

Procedure:

1. [开始调试会话](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server_procedure)。

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

## See also

### 过程

[在 Chrome 中调试 JavaScript](debugging-javascript-in-chrome.html) [查看实际 HTML DOM](viewing-actual-html-dom.html) [HTML](editing-html-files.html)