目標(biāo)

在Webstorm中，開(kāi)啟實(shí)時(shí)調(diào)試功能，配合chrome中的Jetbrain IDE support插件，實(shí)現(xiàn)HTML、CSS、JavaScript編程所見(jiàn)即所得。

簡(jiǎn)要步驟

1. 安裝chrome，安裝chrome插件
   JetBrains IDE Support

   
   
   Chrome插件

2. 設(shè)置WebStorm。

   
   
   設(shè)置情況如圖所示

相關(guān)軟件的版本及下載

1. Chrome

   
   
   Chrome的版本

2. Chrome插件：JetBrains IDE Support

   
   
   JetBrains IDE Support版本

3. WebStorm

   
   
   WebStorm版本

詳細(xì)步驟

1. 離線(xiàn)安裝chrome插件：JetBrains IDE Support

   1. 在能夠上網(wǎng)的計(jì)算機(jī)上，使用Chrome網(wǎng)上插件商店下載安裝插件，網(wǎng)速過(guò)慢的需要等待或者代理。
   2. 通常在下面的路徑中可以找到對(duì)應(yīng)版本的插件安裝目錄，將該目錄保存。
      C:\Users\計(jì)算機(jī)用戶(hù)名\AppData\Local\Google\Chrome\User Data\Default\Extensions\hmhgeddbohgjknpmjagkdomcpobmllji（類(lèi)似一長(zhǎng)串）

   3. 在離線(xiàn)的計(jì)算機(jī)中，打開(kāi)Chrome，在菜單中找到“更多工具”-“擴(kuò)展程序”并打開(kāi)，打開(kāi)“開(kāi)發(fā)者模式”。

      
      
      “更多工具”-“擴(kuò)展程序”

   4. 點(diǎn)擊“加載已解壓的擴(kuò)展程序”，打開(kāi)剛才保存的擴(kuò)展程序文件夾，即可安裝，忽略安全警告。
      5.關(guān)于插件的設(shè)置需要注意一點(diǎn)，下圖中的端口與WebStorm中的要一致。如下圖所示：

      
      
      端口要與WebStorm中的一致

2. 設(shè)置WebStorm：在WebStrom中，“File-Setting”中，搜索框中輸入“Live Edit”，打開(kāi)該選項(xiàng)，按照下圖所示進(jìn)行設(shè)置。

   
   
   設(shè)置情況如圖所示

3. 打開(kāi)需要調(diào)試的網(wǎng)頁(yè)，需要將該網(wǎng)頁(yè)以debug模式打開(kāi)才可以。方法有：一是在項(xiàng)目文件列表中，對(duì)要調(diào)試的文件右鍵，選擇Debug運(yùn)行。二是在下圖右側(cè)點(diǎn)擊小蟲(chóng)子圖標(biāo)運(yùn)行選定的文件。

   
   
   Debug模式運(yùn)行

最終效果

即時(shí)編輯效果圖