前言
我們平時在前端網頁修改好代碼要點擊刷新再去看修改的效果，這樣比較麻煩，那么很多軟件都提供了實時預覽的功能，我們一邊編輯代碼一邊可以看到效果。下面說的是webstorm。

1 Live Edit
首先我們需要在webstorm的settings里安裝插件Live Edit（一般會已經下載好）。

然后在settings里如下圖所示路徑找到插件進行設置。

2 JetBrains IDE Support 插件下載
阿里云盤地址
鏈接：https://www.alipan.com/s/ksu6C2k35z9
提取碼：9ed6
將文件直接拖入下圖的chrome擴展程序頁面即可完成安裝。

確認添加

ip地址和端口號自動生成，一般無需去改。下面就可以使用webstorm實現實時預覽html效果了。

實時預覽變更的頁面