HTML，CSS和JavaScript中的實時編輯

IntelliJ IDEA提供了實時編輯功能，使您可以在調(diào)試會話期間動態(tài)預(yù)覽HTML，CSS或JavaScript代碼的更改。您編輯的頁面的實時內(nèi)容顯示在“調(diào)試”工具窗口的Elements選項卡中 。

實時編輯通過JetBrains Chrome擴展程序運行，因此僅適用于Google Chrome。

提示：實時編輯也適用于包含或生成HTML，CSS或JavaScript的其他文件類型。

在開始使用之前，按照插件管理中的說明安裝并啟用LiveEdit插件。

安裝JetBrains Chrome擴展程序

在調(diào)試會話過程中，該JetBrains Chrome擴展負(fù)責(zé)HTML、CSS和JavaScript中的實時編輯。該擴展還顯示了DOM樹和實際頁面的源代碼。

安裝JetBrains Chrome擴展程序

1. 在Chrome Web Store中打開JetBrains IDE支持頁面。
2. 單擊“添加到Chrome”按鈕 ，然后在打開的“確認(rèn)新擴展”對話框中單擊“添加”?！疤砑拥紺hrome”按鈕更改為“添加到Chrome”

安裝擴展程序后，Chrome地址欄旁會顯示圖標(biāo)。

激活實時編輯

默認(rèn)情況下，禁用“實時編輯”，因此，你需要啟用它：

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“構(gòu)建，執(zhí)行，部署”下的“調(diào)試器” ，然后單擊“實時編輯”。將打開“實時編輯”頁面。
2. 選中“Chrome中的更新應(yīng)用程序”復(fù)選框。這可以實現(xiàn)HTML和CSS的即時預(yù)覽。
3. 要在JavaScript中啟用“實時編輯”，請選中“更新時更新”復(fù)選框。 
   
4. 設(shè)置將更改應(yīng)用于正在運行的應(yīng)用程序所用的時間：接受默認(rèn)值300ms，或使用相應(yīng)字段旁邊的spin框指定自定義值。
   
5. 要配置突出顯示，請選中“在插入符更改時在瀏覽器中突出顯示當(dāng)前元素”復(fù)選框。否則，在調(diào)試會話期間，您必須按住Shift并單擊要突出顯示的元素。
6. 如果客戶端代碼的更改自動上載失敗，而要使IntelliJ IDEA重新啟動服務(wù)器，請選中“如果hotswap失敗則重新啟動”復(fù)選框。
   

激活，取消激活和卸載JetBrains Chrome擴展程序

• JetBrains Chrome擴展程序的控制通過chrome://extensions頁面提供。要打開該頁面，只需在Chrome地址欄輸入chrome://extensions即可?；蛘撸瑔螕簟?  自定義并控制Google Chrome（）”，在上下文菜單中選擇“設(shè)置”，然后在打開的chrome://settings頁面上單擊“擴展”。
• 要取消激活擴展，請清除“已啟用”復(fù)選框。復(fù)選框名稱將更改為“啟用”。
• 要激活擴展，請選中“啟用”復(fù)選框。
• 要卸載擴展程序，請點擊“從Chrome移除”按鈕 。

更改用于連接到IntelliJ IDEA的默認(rèn)端口

在使用實時編輯進行調(diào)試會話的過程中，Chrome擴展程序會監(jiān)聽調(diào)用擴展的JetBrains IDE的端口。包含IntelliJ IDEA的每個IDE都有自己的默認(rèn)端口。

如果由于某種原因，默認(rèn)的IntelliJ IDEA端口已經(jīng)忙，IntelliJ IDEA會找到最近的可用端口并從中啟動。這會導(dǎo)致沖突：IntelliJ IDEA正在“新”端口上運行，而Chrome擴展程序仍然會監(jiān)聽先前啟動的產(chǎn)品的端口。

當(dāng)您使用實時編輯啟動調(diào)試會話時會發(fā)生沖突：擴展無法通過默認(rèn)端口連接，IntelliJ IDEA等待來自擴展的連接，并顯示以下消息及其實際運行的端口號（例如，current port 63342） ：

在Chrome擴展選項中指定實際的IntelliJ IDEA端口

1. 右鍵單擊，并在上下文菜單中選擇“選項”。帶有Chrome擴展程序選項的網(wǎng)頁會打開，顯示連接到IntelliJ IDEA的參數(shù)。
2. 在“IDE連接”區(qū)域中，在“端口”選值框中指定實際的IntelliJ IDEA端口。

覆蓋默認(rèn)的CORS設(shè)置

假設(shè)您正在調(diào)試的頁面使用實時編輯請求資源，出于安全原因，該資源可以防止通過CORS設(shè)置進行訪問。您可以通過更改Chrome擴展選項來啟用對受保護資源的訪問權(quán)限。

1. 右鍵單擊，并在上下文菜單中選擇“選項”。帶有Chrome擴展程序選項的網(wǎng)頁會打開，顯示連接到IntelliJ IDEA的參數(shù)。
2. 在“Force CORS”文本框中，鍵入定義要使其可訪問的URL地址的模式，例如：http://youtrack.jetbrains.com/rest/*。