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树和实际页面的源代码。

在Chrome Web Store中打开JetBrains IDE支持页面。

单击“添加到Chrome”按钮，然后在打开的“确认新扩展”对话框中单击“添加”。“添加到Chrome”按钮更改为“添加到Chrome” 铬扩展添加到铬

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

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

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

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

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

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

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

右键单击 chrome extenstion jb图标，并在上下文菜单中选择“选项”。带有Chrome扩展程序选项的网页会打开，显示连接到IntelliJ IDEA的参数。

在“IDE连接”区域中，在“端口”选值框中指定实际的IntelliJ IDEA端口。

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

右键单击，并在上下文菜单中选择“选项”。带有Chrome扩展程序选项的网页会打开，显示连接到IntelliJ IDEA的参数。

在“Force CORS”文本框中，键入定义要使其可访问的URL地址的模式，例如：http://youtrack.jetbrains.com/rest/\*。