网页调试实时刷新谷歌插件LiveReload

gooood个人博客网站

seo

今天再给大家普及一款前端调试专用插件，谷歌的 LiveReload,这东西是干嘛用的呢？

我们知道编辑器，比如我用的webstorm，或者你们的sublime text*，等等，在编写scss的时候能实时将文件夹中的.scss文件转换为.css文件，或者使用gulp时，能实时将js文件压缩呀等等，这些都是代码处理上编辑器或者一些构建工具对代码的实时操作，LiveReload插件能对浏览器进行实时刷新，也就是说每在编辑器改一句代码，不用F5按下，浏览器自动刷新页面查看效果。

欲练此功，不用自宫，步骤如下：

（1）谷歌浏览器直接 更多工具>拓展程序 搜索即可找到，插件长这样，直接安装即可。

（2）编辑器端配置，我的webstorm直接，File>setting>Build,Execution,Deployment>Debugger>Live Edit,设置如下：

这里Auto in 为实时刷新时间间隔，可自定义设置。

（3）接下来websotrm就提示你了，还要给谷歌安装另一款插件，JetBrains IDE Suport，同第一步，直接安装即可。

（4）最后一步，编辑器中选择文件，鼠标右键，进行dibug调试即可：

点击debug 'index.html' 之后，出现如下：

这时在编辑器更新代码，浏览器实时刷新，根本不用按F5，但是这个黄条不能取消，取消之后则实时调试模式取消。

而且该插件有一个缺点，就是按F12之后，实时刷新即关闭，所以移动端调试时就不能实时刷新页面了。