本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35)、Google Chrome v61.0.3163.100，其他版本软件配置过程可能不一样，请知悉！

一.Google Chrome安装LiveReload插件

1.下载插件
LiveReload 2.1.0
链接：http://pan.baidu.com/s/1bDvsia 密码：aphx

2.安装插件
（1）浏览器地址栏输入：chrome://extensions/进入拓展程序
（2）拖拽安装

鼠标左键选中要安装的插件，拖拽至拓展程序页面，看到“拖放以安装”时释放鼠标，就安装成功了。（小伙伴留下自己的看法，前面这句要删掉吗，我觉得有图片就够了）

别忘了打钩哦

二.Sublime Text 3安装LiveReload插件

1.安装Package Control

ctrl+shift+p 打开命令行
输入Package Control，按下Enter键
首次安装插件需要该步骤，若之前已安装直接看下一步

2.安装LiveReload插件
（1）ctrl+shift+p 打开命令行。 输入install package，按下Enter键

（2）输入LiveReload，按下Enter键
（3）安装成功后，依次点击Preferences > Package Settings > LiveReload > Settings User（首选项 > Package Settings > LiveReload > Settings User），在设置页面输入如下代码

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]
}

（4）重启Sublime Text 3，现在插件就能用了

3.使用LiveReload插件
（1）Google Chrome打开正在编辑的代码，点击浏览器右上角插件按钮
→
（2）在Sublime Text 3修改代码，切换到Google Chrome，你会发现网页自动刷新了

三.Google Chrome安装JetBrains IDE Support插件

1.下载插件
JetBrains IDE Support 2.0.7
链接：http://pan.baidu.com/s/1bptqJx1 密码：9sjb

2.安装插件

请参考本文前面的描述

四.WebStorm使用Live Edit功能

依次点击File>Setttings，搜索框输入live edit。在选择Update>Auto in(ms)，点击OK保存设置

选中要调试的html文件右键选择Debug，这时Google Chrome会弹出该网页。在WebStorm里面修改代码，Google Chrome就可以实时刷新了

注意别点取消，那样就不能实时刷新了

总结下：Sublime Text3安装东西要麻烦些，不过安装好了直接就可以用。而WebStorm虽然安装方便，不过每次使用都要右键Debug比较折腾人。对比下来，我个人更喜欢用Sublime Text3写代码！