CodeLive可以很容易地看到網頁上加載了哪些文件，并快速從頁面跳轉到源文件。開發者可以在正常的工作流程中立即查看HTML、CSS和JSP的更改，甚至可以一次測試多個瀏覽器并測試模擬的移動設備。

Java EE的CodeLive在中可用。

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會話。實時預覽針對您在文件中所做的更改進行了優化，并不是為大規模重組而設計的。