CodeLive可以很容易地看到網(wǎng)頁(yè)上加載了哪些文件，并快速?gòu)捻?yè)面跳轉(zhuǎn)到源文件。開發(fā)者可以在正常的工作流程中立即查看HTML、CSS和JSP的更改，甚至可以一次測(cè)試多個(gè)瀏覽器并測(cè)試模擬的移動(dòng)設(shè)備。

Java EE的CodeLive在中可用。

MyEclipse技術(shù)交流群：742336981 歡迎一起進(jìn)群討論

一、設(shè)置CodeLive

CodeLive將瀏覽器連接到IDE，開發(fā)者可以選擇為每個(gè)Java EE服務(wù)器打開CodeLive。此外，還可以選擇要在Java EE網(wǎng)站的瀏覽器中實(shí)時(shí)預(yù)覽的文件。

1.1 打開/關(guān)閉CodeLive

有兩種不同的方法可以打開或關(guān)閉此功能。

從服務(wù)器視圖工具欄中

從Servers視圖中選擇一個(gè)Java EE服務(wù)器，并單擊Enable CodeLive按鈕。這個(gè)按鈕作為一個(gè)開關(guān)，打開或關(guān)閉CodeLive。當(dāng)啟用CodeLive時(shí)，該圖標(biāo)將突出顯示。

從服務(wù)器視圖上下文菜單

在Servers視圖中右鍵單擊Java EE服務(wù)器并選擇CodeLive，這個(gè)菜單選項(xiàng)作為一個(gè)開關(guān)，打開或關(guān)閉CodeLive。當(dāng)啟用CodeLive時(shí)，該圖標(biāo)將突出顯示。

1.2 選擇文件進(jìn)行實(shí)時(shí)預(yù)覽

當(dāng)啟用CodeLive時(shí)，您可以在Java EE項(xiàng)目中選擇想要實(shí)時(shí)預(yù)覽的文件。

1. 在瀏覽器中查看網(wǎng)頁(yè)。

2. 單擊CodeLive圖標(biāo)（CodeLiveIcon）來(lái)打開CodeLive儀表板。

3. 選擇要為其啟用實(shí)時(shí)預(yù)覽的每個(gè)文件。

4. 單擊Close按鈕。

5. 刷新網(wǎng)頁(yè)。

二、通過(guò)實(shí)時(shí)預(yù)覽查看Java EE網(wǎng)站的編輯

在為Java EE服務(wù)器啟用CodeLive并為用于在項(xiàng)目中加載頁(yè)面的文件啟用Live Preview之后，您就可以從項(xiàng)目中查看頁(yè)面并實(shí)時(shí)查看編輯了。

注意：實(shí)時(shí)預(yù)覽設(shè)計(jì)用于包括web套接字支持的現(xiàn)代瀏覽器，Internet Explorer 9及以下版本不兼容實(shí)時(shí)預(yù)覽。

1. 在一個(gè)或多個(gè)瀏覽器中查看項(xiàng)目中的網(wǎng)頁(yè)，您可以使用移動(dòng)模擬器查看在移動(dòng)設(shè)備上顯示的更改。

TIP：一次查看多個(gè)頁(yè)面來(lái)測(cè)試CSS更改。

2. 編輯與正在查看的文件相關(guān)聯(lián)的HTML、CSS或JSP文件，對(duì)列表、頁(yè)面結(jié)構(gòu)、Div樣式、顏色、字體和頁(yè)邊距等項(xiàng)目的更改會(huì)立即反映在瀏覽器中。

注意：在Live Preview的初始版本中，對(duì)Java Server Pages （JSP）的支持作為一個(gè)實(shí)驗(yàn)性預(yù)覽特性包含在內(nèi)。在頁(yè)面的靜態(tài)區(qū)域工作時(shí)，您可以期望高質(zhì)量地將更改實(shí)時(shí)傳遞給瀏覽器。但是，處理涉及動(dòng)態(tài)區(qū)域的區(qū)域?qū)⒉荒芡耆ぷ鳎驗(yàn)榉?wù)器端處理以不被跟蹤的方式更改值，進(jìn)一步的增強(qiáng)將包含在未來(lái)的CI版本中。

3. 實(shí)時(shí)高亮顯示可以讓您快速查看頁(yè)面上的哪些區(qū)域受到更改的影響，當(dāng)游標(biāo)放置在HTML文件中時(shí)，相應(yīng)的元素將在瀏覽器中突出顯示。當(dāng)光標(biāo)位于CSS文件中的規(guī)則上時(shí)，所有受影響的元素都會(huì)在瀏覽器中突出顯示，實(shí)時(shí)高亮顯示可以從源編輯器或大綱視圖中獲得。

三、查看源代碼

在瀏覽器中查看頁(yè)面時(shí)，您可以選擇查看瀏覽器中加載的源文件并在IDE中打開任何文件，或者從頁(yè)面上的元素直接跳轉(zhuǎn)到源文件。

3.1 查看和打開源文件

1. 在瀏覽器中查看網(wǎng)頁(yè)。

2. 單擊CodeLive圖標(biāo)（CodeLiveIcon）來(lái)打開CodeLive儀表板。

3. 單擊要查看的文件旁邊的“放大鏡”圖標(biāo)，該文件在源編輯器中打開。

3.2 從元素跳轉(zhuǎn)到源代碼

1. 在瀏覽器中查看網(wǎng)頁(yè)。

2. 點(diǎn)擊魔棒圖標(biāo)。

3. 將鼠標(biāo)懸停在頁(yè)面的一個(gè)元素上，文件名顯示在元素下方。

4. 單擊該元素，該文件在源代碼編輯器的對(duì)應(yīng)行打開。

注意：如果您沒有啟用實(shí)時(shí)預(yù)覽，系統(tǒng)會(huì)提示啟用源文件的實(shí)時(shí)預(yù)覽，選擇該文件并重新加載頁(yè)面來(lái)打開源文件。

四、兼容性矩陣

實(shí)時(shí)預(yù)覽在以下環(huán)境中成功地進(jìn)行了測(cè)試。

*通常在Windows測(cè)試中使用Internet Explorer。

五、已知的問(wèn)題

在以下情況下，您可能會(huì)遇到意想不到的結(jié)果：

• 忽略標(biāo)簽庫(kù)條目
  作為實(shí)時(shí)預(yù)覽的一部分，標(biāo)記庫(kù)的元素將被忽略。頁(yè)面上的靜態(tài)塊更改仍然可以正常工作，但是與tab庫(kù)元素同級(jí)的文本或元素節(jié)點(diǎn)可能會(huì)導(dǎo)致意想不到的結(jié)果。
• 不支持完整文件替換
  在處理文件時(shí)，如果您復(fù)制/粘貼整個(gè)文件來(lái)替換當(dāng)前文件，或者通過(guò)GIT進(jìn)行更新，需要重新連接Live Preview會(huì)話。實(shí)時(shí)預(yù)覽針對(duì)您在文件中所做的更改進(jìn)行了優(yōu)化，并不是為大規(guī)模重組而設(shè)計(jì)的。