webstorm使用Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果

---

前言

我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。

---

1 Live Edit

首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。

然后在settings里如下图所示路径找到插件进行设置。

2 JetBrains IDE Support

前面的都容易解决，主要是JetBrains IDE Support的问题。如果可以进入谷歌商店进行下载是首选，要不然只能在网上寻找资源。但是网上太多版本，我下载了一些都是有问题的。终于被我找到一个直接拖拽进来就可以使用的。
百度网盘地址
链接：https://pan.baidu.com/s/1cI-DjtqPOIiort8fz0T7-g
提取码：9mul
将文件直接拖入下图的chrome扩展程序页面即可完成安装。

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