翻譯|使用教程|編輯:陳津勇|2019-11-27 10:19:30.570|閱讀 372 次
概述:使用CodeLive可以輕松查看網頁上正在加載哪些文件,然后快速從頁面跳轉到源,可以在正常的工作流程中立即查看對HTML、CSS和JSP的更改,還可以一次測試多個瀏覽器并測試模擬的移動設備。本文介紹了在Java EE網站上使用MyEclipse中的CodeLive的操作方法。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
設置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圖標打開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”視圖中獲得。
查看源代碼
在瀏覽器中查看頁面時,可以選擇查看瀏覽器中加載的源文件,并在IDE中打開任意文件,或從頁面上的元素直接跳轉到源文件。
查看和打開源文件
1、在瀏覽器中查看網頁。
2、單擊CodeLive圖標打開CodeLive儀表板。
3、單擊 要查看的文件旁邊的放大鏡圖標。該文件將在源代碼編輯器中打開。
從元素跳轉到源代碼
1、在瀏覽器中查看網頁。
2、單擊魔術棒圖標。
3、將鼠標懸停在頁面上的元素上,文件名將顯示在元素下方。
4、單擊元素。該文件將在源代碼編輯器的相應行中打開。
注意:如果尚未啟用實時預覽,則會提示您為源文件啟用實時預覽。選擇文件并重新加載頁面以打開源文件。
兼容性矩陣
Live Preview在以下環境中成功測試。
Chrome | 火狐瀏覽器 | IE瀏覽器 | Edge | Safari | Internal Browser | |
Win 7 64 | X | X | X | |||
Windows 8.1 64 | X | X | X | |||
Windows 10 64 | X | X | X | X | X | |
Linux Mint 16/17 | X | X | ||||
OSX 10.11 | X | |||||
Linux Fedora 23 x64 | X | X |
*通常在Windows測試中使用Internet Explorer。
已知問題
在以下情況下,您可能會遇到意外的結果:
忽略標記庫條目。
標簽庫的元素將作為實時預覽的一部分被忽略。頁面上靜態塊中的更改仍然可以正常工作,但是與標簽庫元素相同的文本或元素節點可能會導致意外結果。
不支持完全文件替換。
使用文件時,如果您復制/粘貼整個文件來替換當前文件,或者通過GIT更新,則需要重新連接Live Preview會話。Live Preview是為您在文件中所做的更改而優化的,并不適用于大規模重組。
慧都16周年·技術服務月,軟件商城優惠券不限量免費領取,購MyEclipse/CodeMix享折上折>>>
想進一步了解MyEclipse?知你所需,解你所惑!
想與更多人聊MyEclipse?加入MyEclipse中國(官方2):742336981暢所欲言吧!
想及時獲取MyEclipse資訊?掃描下方二維碼,MyEclips信息跟你走!
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: