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

相连链接

教学影片

##