前言
我们平时在前端网页修改好代码要点击刷新再去看修改的效果,这样比较麻烦,那么很多软件都提供了实时预览的功能,我们一边编辑代码一边可以看到效果。下面说的是webstorm。
1 Live Edit
首先我们需要在webstorm的settings里安装插件Live Edit(一般会已经下载好)。
然后在settings里如下图所示路径找到插件进行设置。

2 JetBrains IDE Support 插件下载
阿里云盘地址
链接:https://www.alipan.com/s/ksu6C2k35z9
提取码:9ed6
将文件直接拖入下图的chrome扩展程序页面即可完成安装。

确认添加

ip地址和端口号自动生成,一般无需去改。下面就可以使用webstorm实现实时预览html效果了。

实时预览变更的页面
