HTML，CSS和JavaScript中的實(shí)時(shí)編輯

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

實(shí)時(shí)編輯通過JetBrains Chrome擴(kuò)展程序運(yùn)行，因此僅適用于Google Chrome。

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

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

安裝JetBrains Chrome擴(kuò)展程序

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

安裝JetBrains Chrome擴(kuò)展程序

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

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

激活實(shí)時(shí)編輯

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

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

激活，取消激活和卸載JetBrains Chrome擴(kuò)展程序

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

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

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

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

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

在Chrome擴(kuò)展選項(xiàng)中指定實(shí)際的IntelliJ IDEA端口

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

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

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

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