[IDEA＃14] 即時網頁重整：IDEA外掛Live Edit的使用技巧

IntelliJ IDEA Ultimate Edition有兩個對HTML網頁執行即時編輯的方法：

1. 使用內建的瀏覽器預覽
2. 透過Live Edit外掛開啟受控制的Chrome瀏覽器

內建瀏覽器設定

1. 【Settings】→【搜尋browser】→【Web browsers amd Preview】→將【ReLoad page in built-in preview】改成【On Change】，當編輯器修改網頁後，內建瀏覽器自動重整
2. 【Show browser popup in the editon】→勾選【For HTML files】讓編輯HTML檔案時顯示瀏覽器選單

外掛Chrome瀏覽器設定

1. 由Marketplace安裝Live Edit外掛
2. 【Settings】→【搜尋browser】→【Web browsers amd Preview】→勾選Chrome瀏覽器，再點擊其上的編輯
3. 勾選【Use custom user data directory】
4. 若測試時瀏覽器無法即時重整時，在Command line options輸入選項：--remote-debugging-port

內建瀏覽器測試

1. New→Project…→JavaScript→HTML5 Boilerplate
2. 編輯index.html
3. 點擊IDEA圖示
4. 在編輯器輸入任意文字，觀察內建瀏覽器是否即時變更

外部瀏覽器測試

1. 編輯index.html
2. 按右鍵→Debug index.html
3. 在編輯器輸入任意文字，觀察Chrome瀏覽器是否即時變更

版本資訊

• 使用的是IDEA Ultimate 2021.2.3
• Chrome瀏覽器版本：96.0.4664.45 (正式版本) (64位元)

相連鏈接

• Live Edit in HTML, CSS, and JavaScript | IntelliJ IDEA

教學影片

＃＃您可能也會有興趣的類似文章

• 快速建立IntelliJ IDEA的Live Template的步驟 (0則留言, 2014/02/21)
• [IntelliJ IDEA] Java / JavaScript除錯小技巧 (0則留言, 2014/08/14)
• 開發Android應用程式時操作SQLite資料庫的方法 (0則留言, 2019/03/30)
• 使用IntelliJ IDEA學習Java程式設計 (IDEA #1) (0則留言, 2019/07/14)
• 在IntelliJ IDEA裡以Scratch外掛隨時記錄備忘與開啟外部文件 (0則留言, 2016/03/20)
• IntelliJ IDEA Live Template(即時樣板)的使用與範例說明（IDEA #5） (0則留言, 2019/08/11)
• IntelliJ IDEA與Tomcat整合的除錯設定 (0則留言, 2012/11/23)
• Google Chrome瀏覽器的快速啟動器：CATO與Steward (0則留言, 2017/09/27)
• [Chrome擴充] 複製標題與網址的實用擴充：TabCopy (0則留言, 2016/03/06)
• IntelliJ IDEA的專案結構、模組設定與執行時組態設定（IDEA教學 #6） (0則留言, 2019/08/17)
• 字幕編輯軟體Subtitle Edit的使用技巧 (0則留言, 2020/05/15)
• [Java] 常用的IDEA Plugins (0則留言, 2005/06/02)
• [jEdit] jEdit編輯器的初始設定與必裝插件 (3則留言, 2007/10/25)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
• 方便的IntelliJ IDEA外掛：Terminal (0則留言, 2015/01/27)