[工具]web开发时自动刷新网页:liveReload

传统网页开发流程:用sublime text写好代码,运行,发现问题,再回到sublime text修改,运行…如此往复,十分繁琐。今天看到有人(《LiveReload》讓Sublime Text儲存後網頁自動同步更新)用liveReload实现了网页开发同步更新,试了试,果真不错,具体配置方法如下。

需要插件

sublime text:View in Browser;LiveReload

chrome:liveReload

配置方法

1、在sublime text安装插件 view in browser,修改配置

安装插件部分在之前的文章中已经提到,这里不再赘述(不会请戳),因为我主要使用chrome做调试的浏览器,因此需要修改一下view in browser 的配置,打开preferences->package setting->view in browser->setting default,修改默认的浏览器,这里我把firefox改为chrome64

2、在sublime text安装插件liveReload

3、chrome浏览器安装liveReload插件

进入chrome插件中心,搜索liveReload,安装即可。

到此,已经将需要的插件安装完毕。

测试

在sublime text编辑一个测试html文件,按 ctr+alt+v 在浏览器中运行该html,编辑器下方出现livereload提示,并且chrome浏览器的livereload图标中间小圆点由虚变实,说明配置成功。

使用

现在,只需要在sublime text里编辑代码,按 ctr+s 保存,即可在chrome里面看到实时更新。双屏体验极好。

时间: 2024-08-25 15:01:26

[工具]web开发时自动刷新网页:liveReload的相关文章

推荐开发工具系列之--PyF5(自动刷新)

昨天介绍的自动刷新的软件 推荐开发工具系列之--LinrF5(自动刷新)已经是很靠谱了:今天再介绍一款软件,同样靠谱:萝卜白菜各有所爱,看喜欢那种就用那种: 首先下载软件:http://pan.baidu.com/s/1bnttBTt 解压后双击f5.exe即可使用:绿色不用安装:然后复制项目的路径:按下面的截图输入后点击项目: 接着改文件看看效果: 支持Firefox,IE,各种手机浏览器哦,一个F5,所有客户端环境都能搞定,不需要像livereload一样装插件,F5自身就能支持带有服务器技

FireFox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法

做技术,经常在写页面的时候需要多次刷新测试,可是浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效果,这样操作太麻烦了.在IE下我们可以直接 去修改internet选项/常规/浏览历史记录/到internet临时文件选项的设置中,将检查网页中的较新版 本改成每次访问此页时检查.这样我们就不用去清空缓存,每次刷新都能看到最新 的网页内容了. 以下内容由BIWEB网站系统创始人ArthurXF倾情奉献,那么在firefox

IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法

浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效果,这样操作太麻烦了.在IE下我们可以直接 去修改internet选项/常规/浏览历史记录/到internet临时文件选项的设置中,将检查网页中的较新版 本改成每次访问此页时检查.这样我们就不用去清空缓存,每次刷新都能看到最新 的网页内容了. 在firefox我们找遍 了所有的设置选项,竟然没有发现向IE那样的每次访问此页检查的选项.那么我们 怎么办呢?看到很多朋友在f

推荐开发工具系列之--LinrF5(自动刷新)

最近有点事:略忙:以至于上篇文章说好的明天一直到了今天才到: //*******************************分割是会呼吸的痛****************************** 作为一个程序员:尤其是作为一个网站开发程序员:如果再更尤其点作为一个前端程序员:想必有一套动作做的是相当的多:那就是不断的ctrl+s -> alt+tab -> F5 (就在打F5这2个字的时候竟然随手按了下F5,码的这些字瞬间就没了,还好ueditor足够强大自动保存了草稿可以恢复,真诚

打开页面自动刷新网页,自动刷新当前页面,JS调用

reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和"后退"来访问已经被替换

前端开发 ---浏览器自动刷新

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } span.Apple-tab-span { white-space: pre } 1.livereload (1

【转载】 IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法

[参考了别人的文章]我们做技术,经常在写页面的时候需要多次刷新测试,可是浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效果,这样操作太麻烦了.在IE下我们可以直接 去修改internet选项/常规/浏览历史记录/到internet临时文件选项的设置中,将检查网页中的较新版 本改成每次访问此页时检查.这样我们就不用去清空缓存,每次刷新都能看到最新 的网页内容了. 以下内容由BIWEB网站系统创始人ArthurXF倾情奉

网页返回上一页时自动刷新页面

js代码如下: <script> $(function () { window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } } }); </script> 原文地址:https://www.cnblogs.com/phperlinxinlan/p/10384510.html

微信web开发ui框架制作网页实例教程

框架:微信ui开发框架 范围:开发所有的微信web页面 下载地址:http://www.chtml.cn/topic/show/49 实例一.Button 按钮可以使用a或者button标签.wap上要触发按钮的active态,必须触发ontouchstart事件,可以在body上加上ontouchstart=""全局触发. 按钮常见的操作场景:确定.取消.警示,分别对应class:weui_btn_primary.weui_btn_default.weui_btn_warn,每种场景