[工具]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里面看到实时更新。双屏体验极好。
2014.11.27更新
之前有博友说sublime text无法使用,今天竟然莫名奇妙的down掉了,现将解决办法说明如下。
1、去livereload官网下载windows版本,安装,将需要同步的文件夹放入livereload中。
2、先将html页面在浏览器里面打开,之后再用文本编辑器编辑。
[工具]web开发时自动刷新网页:liveReload的更多相关文章
- Sublime3和Chrome配置自动刷新网页【实测可用】
SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法.win7下实测可用! 安装成功后,就不需要再手 ...
- Golang Web开发时前端出现谜之空白换行的坑
在使用Golang做Web开发时,有时候渲染出来的模板在前台显示时会出现一些奇怪的空白换行,具体特征就是查看css样式表并没有相关定义的空白部分. 分析: 查看出现问题页面的网页源代码,复制空白换行部 ...
- Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率
1. 问题 1.1. 问题上下文描述: 基于Ionic进行PC端的Web应用开发: 使用Tomcat作为最终服务发布容器. 1.2. 问题描述: 编译后main.js的大小为4-6MByte.(集成第 ...
- java web开发时的绝对路径与相对路径
相对路径 不以/开头的路径为相对路径,使用相对路径时的路径为当前访问的文件的父目录,即如果现在访问文件的路径为http://localhost:8080/项目名/目录/文件,那么使用相对路径时路径前缀 ...
- 【20171104中】chrome自动刷新网页
target:刷访问量 tools:chrome / url start: s1:百度知道,https://zhidao.baidu.com/question/750134067096113532.h ...
- 【转载】 IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法
[参考了别人的文章]我们做技术,经常在写页面的时候需要多次刷新测试,可是浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效 ...
- IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法
浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效果,这样操作太麻烦了.在IE下我们可以直接 去修改internet选项/ ...
- node开发自动刷新网页中的css和javascript
在已有node的环境下,安装browser-sync: npm install -g browser-sync 然后运行,默认本目录下(最后填写要监听的文件--本实例监听了css文件夹下面的所有css ...
- 9 Web开发——springmvc自动配置原理
官方文档目录: https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/#boot-features-sp ...
随机推荐
- 一本QT书,连接MySQL图文并茂
http://qtdebug.com/index.html http://qtdebug.com/DB-AccessMySQL.html
- encodeURI和encodeURIComponent的比较
encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码,将相关参数转换成UTF-8编码格式的数据.URI在进行定位跳转时,参数里面的中文.日文等非AS ...
- Windows下重启指定名称的服务
// 重启指定服务 void CPSSDPrinterCtrlPlug::RestartService(const wchar_t* nswServiceName) { SC_HANDLE schSC ...
- 爱斯达M2C服装定制系统介绍—在线播放—优酷网,视频高清在线观看
爱斯达M2C服装定制系统介绍-在线播放-优酷网,视频高清在线观看 视频: 爱斯达M2C服装定制系统介绍
- [置顶] Extjs4 异步刷新书的情况下 保持树的展开状态
前言:首先我觉得搞IT不管你是菜鸟还是特种兵,最重要的品质就是分享知识,因为可能在你这,这点知识不算什么,可是对于像我这样的菜鸟来说,无疑就可能会从中得到一点启发,甚至更大!此段代码,是我在某个网站上 ...
- 魅蓝Note2跑分 MT6753性能究竟如何
MT6753实力究竟如何? 采用LP工艺的MT6753实际上在性能和功耗方面并不比MT6752高,相反,同频下功耗要高1/3左右.并且其内存带宽是5.3G/s,小于MT 6752的6.4G/s 而且没 ...
- Android邮件发送详解
转载:http://flysnow.iteye.com/blog/1128354 Android中我为什么发不了邮件???我手机里明明有邮件客户端的,可我为什么不能调用它发送邮件???相信这是很多人会 ...
- Android摇一摇振动效果Demo
前言 在微信刚流行的时候,在摇一摇还能用来那啥的时候,我也曾深更半夜的拿着手机晃一晃.当时想的最多的就是.我靠,为神马摇一下须要用这么大的力度,当时我想可能腾讯认为那是个人性的设计.后来才发觉 ...
- C++指针数组和数组指针
指针相关问题 using namespace std; int main(){ //a) 一个整型数( An integer) int a; //b) 一个指向整型数的指针( A pointer to ...
- Java基础知识强化52:经典排序之冒泡排序(BubbleSort)
1. 冒泡排序的原理图: 2. 冒泡排序代码实现: package cn.itcast_01; /* * 数组排序之冒泡排序: * 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 ...