使用实时预览Live preview

CodeMix 2019.6.11 推出了新一代实时预览版。实时预览浏览器窗口可让您立即查看Web 和 Java EE 应用程序的预览。对于某些项目配置，在键入时实时看到更改，而无需保存文件。

在大多数情况下，它会”只工作”，显示代的实时预览。对于受支持的文件类型，当我们可以确定要在预览窗格中显示的目标 URL 时，预览将显示在编辑器的右侧。

要切换预览窗格，请使用编辑工具栏中的切换控件或快捷方式。Ctrl/Cmd+Alt+E

基于应用程序类型的功能

实时预览根据您使用的应用程序类型以不同的方式工作，我们将在下面介绍其中一些差异。

WEB应用程序

本节适用于编辑 Web 应用程序中的文件，如Angular、Vue、React 等，基本上任何具有”serve”脚本的基于节点的应用程序。

• 实时预览在应用程序送达之前保持禁用状态。如果您尝试打开实时预览版，我们为您提供开始为您提供应用程序。
• “即用”支持不适用于这些应用程序，只有在保存更改后，窗格才可能更新。
• 框架的生成和重新加载技术确定是否应重新加载窗格的内容，并在适当时自动重新加载。您可以使用预览窗格中的工具栏手动重新加载页面。

Java EE/HTTP 应用程序

本节适用于当前部署到正在运行的 Java EE或HTTP 服务器的文件。

注：如果您正在未部署的 Java EE 项目中工作，或者该项目已部署，但服务器未启动，请参阅下一节。

• 为避免不必要的重新加载，实时预览仅在 URL 与正在编辑的文件完全匹配时自动重新加载预览窗格的内容。实时预览等待资源与服务器同步，然后再启动重新加载。您可以使用预览窗格中的工具栏手动重新加载页面。

其他案例

如果应用程序不适合上述两个类别，则在内部部署并本地提供，以实现最佳的实时预览体验。

• 提供”随类型”支持，更改将在键入时中继到预览窗格，而无需保存文件。
• 通过实时中继更改，应该无需手动重新加载页面，但您可以从预览窗格中的工具栏自由加载页面。

本地服务的好处是，您的页面和应用程序从在幕后运行的 HTTP 服务器加载，而不是直接从具有一个 url 的文件系统加载file://。

安全说明：您可能希望在外部浏览器中查看本地服务的应用程序。只需使用工具栏上的按钮复制 URL，然后粘贴到外部浏览器中即可。URL 中的参数具有 Eclipse 实例的唯一值，如果 URL 中省略此参数，则外部浏览器将无法访问 URL。这是一个安全功能，防止同一系统上的其他用户能够加载此 URL。一旦加载了该参数的单个页面，可能会从同一浏览器/配置文件中的进一步 URL 中省略该参数，因为 Cookie 将保存为身份验证详细信息。_cmAuth

设置

启用后，如果编辑器窗格不够宽无法并排显示源窗格和预览窗格，则实时预览窗格将自动折叠。在折叠状态下预览在悬停时展开。

若要控制不同状态的窗格宽度，请参阅 Preferences>CodeMix>Miscellaneous>Live Preview 。

若要控制实时预览可用的文件类型，请参阅 Preferences>CodeMix>Miscellaneous>Live Preview>Includes/Excludes 。

实时预览如何确定要加载的 URL

目标 URL 是预览窗口中加载的 URL。确定在跨项目中的文件或工作区中的项目移动时要加载的正确的 URL 是获得最佳实时预览体验的关键。

• 现代 Web应用程序 — 为整个项目的文件加载的 URL 通常是应用程序根的 URL。如果希望为给定文件加载不同的 URL，请参阅导航到不同的目标，其中您只需要覆盖此 URL 一次。
  其他Web 应用程序— 如果您正在编辑直接呈现的页面（如 HTML、JSP 或 PHP 页面），则要加载的 URL 通常很明显，并且由预览窗格自动加载。无论文件是本地服务还是部署到正在运行的 HTTP 服务器，在这些情况下，工具栏将显示该图标。
• 样式表– 如果样式表以前由预览窗格中显示的 URL 加载，则实时预览会记住关联并加载该 URL。工具栏显示图标。此关联不会在整个 Eclipse 会话中持久化。
• 如果实时预览无法确定要为要编辑的文件加载的 URL，则在打开文件时禁用该 URL。这由图标指示。单击此图标时，可以选择输入要加载的 URL。

注：您可以使用自定义 URL 覆盖前两种技术加载的 URL（见下文）。在这种情况下，自定义 URL 优先于所有其他映射。

导航到不同的目标

在某些情况下，可能需要手动设置预览窗格加载的 URL，或者，您可能只希望导航到其他页面。您可以使用”实时预览”工具栏更改加载的 URL。

1. 单击工具栏中的 URL（或页面标题）。
   
   
2. 在”Location”字段中输入 URL。
3. 选择行为：
   仅对 <filename>=URL 在编辑当前文件时加载此 URL。
   对于此文件夹中的所有文件使用此URL ，将为此文件夹中与当前编辑的文件相同的文件夹中的所有文件加载 URL。
   此 URL 用于此项目的所有文件– URL 将加载与当前编辑的文件相同的项目中的所有文件。
   仅更新浏览器中的更新位置;不记得= 仅导航到此 URL 一次，当您再次编辑此文件时，不会重新加载 URL。

更新 URL 映射

要重置或更改上述任何映射，请选择您进行映射的文件、文件夹或项目，然后通过上下文菜单打开其属性。在”实时预览”页中，您现在可以选择使用”从活动编辑器派生 URL”选项返回默认行为，或在可用字段中指定新 URL。
如果离开文件的目标 URL，则图标将启用，单击该图标会将预览窗格带回目标 URL。

防止自动导航

如果不希望预览在编辑器之间移动时更改，请单击”实时预览”工具栏上的图标以分离预览窗格。或者，如果可能，请清除”Preferences>CodeMix>Miscellaneous>Live Preview上的”关注编辑器”选择复选框。

若要更新或更改加载的 URL，请单击”实时预览”工具栏中的 URL（或页面标题）以显示”浏览到位置”对话框。