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

时间:2024-03-31 14:31:52

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

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

欲练此功,不用自宫,步骤如下:

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

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

(2)编辑器端配置,我的webstorm直接,File>setting>Build,Execution,Deployment>Debugger>Live Edit,设置如下:

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

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

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

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

(4)最后一步,编辑器中选择文件,鼠标右键,进行dibug调试即可:

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

点击debug 'index.html' 之后,出现如下:

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

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

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