HTML，CSS和JavaScript中的实时编辑

IntelliJ IDEA提供了实时编辑功能，使您可以在调试会话期间动态预览HTML，CSS或JavaScript代码的更改。您编辑的页面的实时内容显示在“调试”工具窗口的Elements选项卡中 。

实时编辑通过JetBrains Chrome扩展程序运行，因此仅适用于Google Chrome。

提示：实时编辑也适用于包含或生成HTML，CSS或JavaScript的其他文件类型。

在开始使用之前，按照插件管理中的说明安装并启用LiveEdit插件。

安装JetBrains Chrome扩展程序

在调试会话过程中，该JetBrains Chrome扩展负责HTML、CSS和JavaScript中的实时编辑。该扩展还显示了DOM树和实际页面的源代码。

安装JetBrains Chrome扩展程序

1. 在Chrome Web Store中打开JetBrains IDE支持页面。
2. 单击“添加到Chrome”按钮 ，然后在打开的“确认新扩展”对话框中单击“添加”。“添加到Chrome”按钮更改为“添加到Chrome”

安装扩展程序后，Chrome地址栏旁会显示图标。

激活实时编辑

默认情况下，禁用“实时编辑”，因此，你需要启用它：

1. 在“设置/首选项”对话框（Ctrl+Alt+S）中，单击“构建，执行，部署”下的“调试器” ，然后单击“实时编辑”。将打开“实时编辑”页面。
2. 选中“Chrome中的更新应用程序”复选框。这可以实现HTML和CSS的即时预览。
3. 要在JavaScript中启用“实时编辑”，请选中“更新时更新”复选框。 
   
4. 设置将更改应用于正在运行的应用程序所用的时间：接受默认值300ms，或使用相应字段旁边的spin框指定自定义值。
   
5. 要配置突出显示，请选中“在插入符更改时在浏览器中突出显示当前元素”复选框。否则，在调试会话期间，您必须按住Shift并单击要突出显示的元素。
6. 如果客户端代码的更改自动上载失败，而要使IntelliJ IDEA重新启动服务器，请选中“如果hotswap失败则重新启动”复选框。
   

激活，取消激活和卸载JetBrains Chrome扩展程序

• JetBrains Chrome扩展程序的控制通过chrome://extensions页面提供。要打开该页面，只需在Chrome地址栏输入chrome://extensions即可。或者，单击“   自定义并控制Google Chrome（）”，在上下文菜单中选择“设置”，然后在打开的chrome://settings页面上单击“扩展”。
• 要取消激活扩展，请清除“已启用”复选框。复选框名称将更改为“启用”。
• 要激活扩展，请选中“启用”复选框。
• 要卸载扩展程序，请点击“从Chrome移除”按钮 。

更改用于连接到IntelliJ IDEA的默认端口

在使用实时编辑进行调试会话的过程中，Chrome扩展程序会监听调用扩展的JetBrains IDE的端口。包含IntelliJ IDEA的每个IDE都有自己的默认端口。

如果由于某种原因，默认的IntelliJ IDEA端口已经忙，IntelliJ IDEA会找到最近的可用端口并从中启动。这会导致冲突：IntelliJ IDEA正在“新”端口上运行，而Chrome扩展程序仍然会监听先前启动的产品的端口。

当您使用实时编辑启动调试会话时会发生冲突：扩展无法通过默认端口连接，IntelliJ IDEA等待来自扩展的连接，并显示以下消息及其实际运行的端口号（例如，current port 63342） ：

在Chrome扩展选项中指定实际的IntelliJ IDEA端口

1. 右键单击，并在上下文菜单中选择“选项”。带有Chrome扩展程序选项的网页会打开，显示连接到IntelliJ IDEA的参数。
2. 在“IDE连接”区域中，在“端口”选值框中指定实际的IntelliJ IDEA端口。

覆盖默认的CORS设置

假设您正在调试的页面使用实时编辑请求资源，出于安全原因，该资源可以防止通过CORS设置进行访问。您可以通过更改Chrome扩展选项来启用对受保护资源的访问权限。

1. 右键单击，并在上下文菜单中选择“选项”。带有Chrome扩展程序选项的网页会打开，显示连接到IntelliJ IDEA的参数。
2. 在“Force CORS”文本框中，键入定义要使其可访问的URL地址的模式，例如：http://youtrack.jetbrains.com/rest/*。