[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位元)

相連鏈接

教學影片

##

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

簡睿

服務於軟體業的資訊老兵。興趣廣泛,學習力佳,樂於分享所知所學。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *