使用MyEclipse开发Java EE应用：在Java EE网站上使用CodeLive

使用CodeLive可以轻松查看网页上正在加载哪些文件，然后快速从页面跳转到源，可以在正常的工作流程中立即查看对HTML、CSS和JSP的更改，还可以一次测试多个浏览器并测试模拟的移动设备。本文介绍了在Java EE网站上使用MyEclipse中的CodeLive的操作方法。

下载MyEclipse  

设置CodeLive

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

• 打开/关闭CodeLive

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

1、从Servers View Toolbar

从Servers中选择一个Java EE服务器，单击Enable CodeLive按钮（这个按钮起切换的作用），打开或关闭CodeLive。当启用CodeLive时，图标高亮显示。

2、从Servers View Context-Menu

在“Sever”视图中右键单击Java EE服务器，然后选择CodeLive（此菜单选项用作切换）可打开或关闭CodeLive。启用CodeLive时，该图标突出显示。

• 选择文件进行实时预览

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

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

2、单击CodeLive图标

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

4、单击关闭按钮。

5、刷新网页。

使用Live Preview查看对Java EE网站的编辑

在为Java EE服务器启用CodeLive并为用于加载项目中页面的文件启用实时预览后，就可以查看项目中的页面并实时查看所做的编辑。

注意：Live Preview被设计用于包含web socket的现代浏览器，Internet Explorer 9及以下版本与Live Preview不兼容。

1、在一个或多个浏览器中查看项目中的网页。可以使用移动模拟器  来查看更改，就像在移动设备上一样。

提示：建议一次查看多个页面以测试CSS更改。

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

注意：在Live Preview的初始版本中，对Java Server Pages（JSP）的支持作为实验性预览功能包括在内。在页面的静态区域中工作时，可以将高质量的内容实时传递到浏览器。但是，由于服务器端处理以未跟踪的方式更改了值，所以使用区域接触动态区域不会完全工作。将来的CI版本中将包含更多增强功能。

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

下载MyEclipse  

查看源代码

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

• 查看和打开源文件

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

2、单击CodeLive图标

3、单击 要查看的文件旁边的放大镜图标

• 从元素跳转到源代码

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

2、单击魔术棒图标。

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

4、单击元素。该文件将在源代码编辑器的相应行中打开。

注意：如果尚未启用实时预览，则会提示您为源文件启用实时预览。选择文件并重新加载页面以打开源文件。 

兼容性矩阵

Live Preview在以下环境中成功测试。

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

已知问题

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

• 忽略标记库条目。

• 标签库的元素将作为实时预览的一部分被忽略。页面上静态块中的更改仍然可以正常工作，但是与标签库元素相同的文本或元素节点可能会导致意外结果。

• 不支持完全文件替换。

• 使用文件时，如果您复制/粘贴整个文件来替换当前文件，或者通过GIT更新，则需要重新连接Live Preview会话。Live Preview是为您在文件中所做的更改而优化的，并不适用于大规模重组。

16周年·技术服务月，软件商城优惠券不限量免费领取，购MyEclipse/CodeMix享折上折>>>

想进一步了解MyEclipsestrong>【MyEclipse官方中文网】知你所需，解你所惑！

想与更多人聊MyEclipse入MyEclipse中国（官方2）：742336981畅所欲言吧！

想及时获取MyEclipse资讯描下方二维码，MyEclips信息跟你走！

标签：

来源：慧都