CodeLive可以很容易地看到网页上加载了哪些文件，并快速从页面跳转到源文件。开发者可以在正常的工作流程中立即查看HTML、CSS和JSP的更改，甚至可以一次测试多个浏览器并测试模拟的移动设备。

Java EE的CodeLive在MyEclipse中可用。

MyEclipse技术交流群：742336981 欢迎一起进群讨论

一、设置CodeLive

CodeLive将浏览器连接到IDE，开发者可以选择为每个Java EE服务器打开CodeLive。此外，还可以选择要在Java EE网站的浏览器中实时预览的文件。

1.1 打开/关闭CodeLive

有两种不同的方法可以打开或关闭此功能。

从服务器视图工具栏中

从Servers视图中选择一个Java EE服务器，并单击Enable CodeLive按钮。这个按钮作为一个开关，打开或关闭CodeLive。当启用CodeLive时，该图标将突出显示。

从服务器视图上下文菜单

在Servers视图中右键单击Java EE服务器并选择CodeLive，这个菜单选项作为一个开关，打开或关闭CodeLive。当启用CodeLive时，该图标将突出显示。

1.2 选择文件进行实时预览

当启用CodeLive时，您可以在Java EE项目中选择想要实时预览的文件。

1. 在浏览器中查看网页。

2. 单击CodeLive图标（CodeLiveIcon）来打开CodeLive仪表板。

3. 选择要为其启用实时预览的每个文件。

4. 单击Close按钮。

5. 刷新网页。

二、通过实时预览查看Java EE网站的编辑

在为Java EE服务器启用CodeLive并为用于在项目中加载页面的文件启用Live Preview之后，您就可以从项目中查看页面并实时查看编辑了。

注意：实时预览设计用于包括web套接字支持的现代浏览器，Internet Explorer 9及以下版本不兼容实时预览。

1. 在一个或多个浏览器中查看项目中的网页，您可以使用移动模拟器查看在移动设备上显示的更改。

TIP：一次查看多个页面来测试CSS更改。

2. 编辑与正在查看的文件相关联的HTML、CSS或JSP文件，对列表、页面结构、Div样式、颜色、字体和页边距等项目的更改会立即反映在浏览器中。

注意：在Live Preview的初始版本中，对Java Server Pages （JSP）的支持作为一个实验性预览特性包含在内。在页面的静态区域工作时，您可以期望高质量地将更改实时传递给浏览器。但是，处理涉及动态区域的区域将不能完全工作，因为服务器端处理以不被跟踪的方式更改值，进一步的增强将包含在未来的CI版本中。

3. 实时高亮显示可以让您快速查看页面上的哪些区域受到更改的影响，当游标放置在HTML文件中时，相应的元素将在浏览器中突出显示。当光标位于CSS文件中的规则上时，所有受影响的元素都会在浏览器中突出显示，实时高亮显示可以从源编辑器或大纲视图中获得。

三、查看源代码

在浏览器中查看页面时，您可以选择查看浏览器中加载的源文件并在IDE中打开任何文件，或者从页面上的元素直接跳转到源文件。

3.1 查看和打开源文件

1. 在浏览器中查看网页。

2. 单击CodeLive图标（CodeLiveIcon）来打开CodeLive仪表板。

3. 单击要查看的文件旁边的“放大镜”图标，该文件在源编辑器中打开。

3.2 从元素跳转到源代码

1. 在浏览器中查看网页。

2. 点击魔棒图标。

3. 将鼠标悬停在页面的一个元素上，文件名显示在元素下方。

4. 单击该元素，该文件在源代码编辑器的对应行打开。

注意：如果您没有启用实时预览，系统会提示启用源文件的实时预览，选择该文件并重新加载页面来打开源文件。

四、兼容性矩阵

实时预览在以下环境中成功地进行了测试。

*通常在Windows测试中使用Internet Explorer。

五、已知的问题

在以下情况下，您可能会遇到意想不到的结果：

• 忽略标签库条目
  作为实时预览的一部分，标记库的元素将被忽略。页面上的静态块更改仍然可以正常工作，但是与tab库元素同级的文本或元素节点可能会导致意想不到的结果。
• 不支持完整文件替换
  在处理文件时，如果您复制/粘贴整个文件来替换当前文件，或者通过GIT进行更新，需要重新连接Live Preview会话。实时预览针对您在文件中所做的更改进行了优化，并不是为大规模重组而设计的。