传统网页开发流程:用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的更多相关文章

  1. Sublime3和Chrome配置自动刷新网页【实测可用】

    SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法.win7下实测可用! 安装成功后,就不需要再手 ...

  2. Golang Web开发时前端出现谜之空白换行的坑

    在使用Golang做Web开发时,有时候渲染出来的模板在前台显示时会出现一些奇怪的空白换行,具体特征就是查看css样式表并没有相关定义的空白部分. 分析: 查看出现问题页面的网页源代码,复制空白换行部 ...

  3. Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率

    1. 问题 1.1. 问题上下文描述: 基于Ionic进行PC端的Web应用开发: 使用Tomcat作为最终服务发布容器. 1.2. 问题描述: 编译后main.js的大小为4-6MByte.(集成第 ...

  4. java web开发时的绝对路径与相对路径

    相对路径 不以/开头的路径为相对路径,使用相对路径时的路径为当前访问的文件的父目录,即如果现在访问文件的路径为http://localhost:8080/项目名/目录/文件,那么使用相对路径时路径前缀 ...

  5. 【20171104中】chrome自动刷新网页

    target:刷访问量 tools:chrome / url start: s1:百度知道,https://zhidao.baidu.com/question/750134067096113532.h ...

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

    [参考了别人的文章]我们做技术,经常在写页面的时候需要多次刷新测试,可是浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效 ...

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

    浏览器都有自己的 缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改的CSS就看不到效果 了,每次都去清空缓存,再刷新看效果,这样操作太麻烦了.在IE下我们可以直接 去修改internet选项/ ...

  8. node开发自动刷新网页中的css和javascript

    在已有node的环境下,安装browser-sync: npm install -g browser-sync 然后运行,默认本目录下(最后填写要监听的文件--本实例监听了css文件夹下面的所有css ...

  9. 9 Web开发——springmvc自动配置原理

    官方文档目录: https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/#boot-features-sp ...

随机推荐

  1. IBM总裁郭士纳总结的四类人

    IBM总裁郭士纳总结的四类人, 您属于哪一种呢-欢迎就此话题发表评论 积极采取行动促使事件发生的人 被动接受所发生事件的人 对事件持旁观者心态的人 什么事都不关心的人

  2. 设计模式(十四):Command命令模式 -- 行为型模式

    1.概述         在软件设计中,我们经常需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是哪个,我们只需在程序运行时指定具体的请求接收者即可,此时,可以使用命令模式来 ...

  3. LINQ 内链接 左链接 右链接

    原文地址:http://blog.sina.com.cn/s/blog_46e9573c01014fx2.html 1.左连接: var LeftJoin = from emp in ListOfEm ...

  4. 大型分布式C++框架《二:大包处理过程》

    本来这一篇是打算写包头在分布式平台中的具体变换过程的.其实文章已经写好了.但是想了这个应该是不能随便发表的.毕竟如果知道了一个包的具体每个字节的意义.能伪造包来攻击系统.其次来介绍一个包的具体变换过程 ...

  5. JS学习之道:javascript keycode大全

    keycode    8 = BackSpace BackSpace keycode    9 = Tab Tab keycode   12 = Clear keycode   13 = Enter ...

  6. linux内存管理--slab及其代码解析

    Linux内核使用了源自于 Solaris 的一种方法,但是这种方法在嵌入式系统中已经使用了很长时间了,它是将内存作为对象按照大小进行分配,被称为slab高速缓存. 内存管理的目标是提供一种方法,为实 ...

  7. Python爬虫实战(二)

    本来晚上是准备写贴吧爬虫的,但是在分析页面时就遇到了大麻烦!选取了某个帖子,在爬取的时候,发现正则匹配不全..很尴尬!!先来看看吧, #!/usr/bin/env python # -*- codin ...

  8. android中广播接收SD卡状态

    mReceiver = new BroadcastReceiver() { //add by mengmeng.chen begin public void onReceive(Context con ...

  9. [Node.js] node-persist: localStorage on the server

    // Save data var storage = require('node-persist'); storage.init(); var people= require('./people.js ...

  10. 基于MFC的socket编程(异步非阻塞通信)

       对于许多初学者来说,网络通信程序的开发,普遍的一个现象就是觉得难以入手.许多概念,诸如:同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)等,初学者往往迷惑不清, ...