我们在编写前端代码时,写好一部分代码时想要看一看代码的实现效果,每次都要手动刷新会非常麻烦,神器来了,LiveReload插件实现网页的实时刷新,操作方法如下:

1. 官网下载Sublime Text 3
根据自己的电脑版本选择相应的安装包,这里我选择的是Windows 64-bit,下载完成后默认安装即可

2. 安装Package Control
安装完成后打开Sublime Text 3,使用快捷键Ctrl+` 打开控制台,输入一下代码并回车

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

完成后再Preferences下出现Package Control即为安装成功

  1. 使用Package Control安装插件的方法:

快捷键ctrl+shift+p调出Package Control,输入ip,选择Install Package回车,等待几分钟。

输入要安装的插件名回车即可安装

3.Sublime Text 3安装LiveReload
接上一步,输入LiveReload,回车,等待安装完成

4.谷歌Chrome安装LiveReload插件
打开
Chrome网上应用商店(ps:自己想办法或者网上搜教程),搜索LiveReload,并添加到Chrome

5.添加完成后浏览器右上角会出现一个小圆环,如下:

右键小圆环,选择管理拓展程序,开启允许访问文件网址

6.打开想要实现实时刷新的网页文件,点击右上角小圆环,小圆环中间的校园点变成实心即可

7、Sublime Text 3打开,快捷键Ctrl+shift+p,键入livereload,选择livereload:Enable/disable plug-ins回车即可。

8.在Preferences中选择settings-user,输入以下代码并保存

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}


9.网页源码更新后Ctrl+S保存后,网页会同时刷新,是不是感觉一下子就方便了很多,省时又省力,哈哈哈!!!

Sublime Text 3结合Chrome实现网页的自动刷新的更多相关文章

  1. sublime text build system automatic ctrl/cmd+B自动选择 python2 或 python3

    背景 我同时安装了 python2 和 python3 时,python 指向 python2,python3 才是 python3 默认情况下,在 Sublime 内 Ctrl/Cmd + B 运行 ...

  2. sublime text 3 ,React,html元素自动补全方法(用Emmet写法写jsx中的html)

    1. 安装emmet: Preferences -> Package Control -> Install Package -> emmet 2. 配置emmet: Preferen ...

  3. 使用chrome开发程序,自动刷新开发目录

    npm i livereload -g 在开发目录下: livereload 安装这个插件:https://chrome.google.com/webstore/detail/livereload/j ...

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

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

  5. Sublime Text 有哪些使用技巧

    1. 更改变量名的几种方法<img src="https://pic4.zhimg.com/d93cf0e8987e0117f3a3187cfe8e53fb_b.jpg&quo ...

  6. 令人惊叹的sublime text 3 插件

    1.Chinese​Localization------语言汉化.(新手必备) 2.SublimeTmpl------打开生成模板.(新手必备) 3.SublimeCodeIntel------代码自 ...

  7. [转]Sublime Text操作

    原文地址:http://www.madongdong.me/sublime-text3%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/ 作者:马东东 前言(Prologue) ...

  8. 【Sublime Text】sublime修改默认浏览器及使用不同浏览器打开网页的快捷键设置

    #第一步:安装SideBarEnhancements插件 下载插件,需要“翻墙”,故提供一下该插件的github地址:https://github.com/titoBouzout/SideBarEnh ...

  9. Sublime Text 3 全程详细图文原创教程(持续更新中。。。)

    一. 前言 使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知.最初也是不知道从何下手,满世界地查找资料,但能查阅到的资料,苦于它们的零碎.片面,不够系统 ...

随机推荐

  1. mysql事务控制语言TCL

    Transaction Control Language 事务控制语言 事务:一个或一组sql语句组成一个执行单元,这个执行单元作为不可分割的整体执行.如果某个语句执行错误,整个单元回滚到最初的状态. ...

  2. day02 web主流框架

    day02 web主流框架 今日内容概要 手写简易版本web框架 借助于wsgiref模块 动静态网页 jinja2模板语法 前端.web框架.数据库三种结合 Python主流web框架 django ...

  3. 零基础学习java------day12------数组高级(选择排序,冒泡排序,二分查找),API(Arrays工具类,包装类,BigInteger等数据类型,Math包)

    0.数组高级 (1)选择排序 它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的起始位置 ...

  4. [学习总结]5、Android的ViewGroup中事件的传递机制(二)

    下面是第一篇的连接 Android的ViewGroup中事件的传递机制(一) 关于onInterceptTouchEvent和onTouchEvent的详细解释. 1 public class Mai ...

  5. 【Python】【Basic】MacOS上搭建Python开发环境

    1. Python3 1.1. 下载地址:https://www.python.org/downloads/mac-osx/ 1.1.1. PKG包安装: 没啥可说的,点点点,下一步而已,不用手动配置 ...

  6. 实现nfs持久挂载+autofs自动挂载

    实验环境: 两台主机 node4:192.168.37.44 NFS服务器 node2:192.168.37.22 客户端 在nfs服务器,先安装nfs和rpcbind [root@node4 fen ...

  7. SpringColud微服务-微服务概述

    一.什么是微服务架构 微服务架构是一种架构模式,它提倡讲单一应用程序划分为一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在单独的进程当中,服务与服务之间采用轻量级的通信机制 ...

  8. 使用 IntelliJ IDEA 远程调试 Tomcat

    一.本地 Remote Server 配置 添加一个Remote Server 如下图所示 1. 复制JVM配置参数,第二步有用 2. 填入远程tomcat主机的IP地址和想开启的调试端口(自定义) ...

  9. JSP 文字乱码、${}引用无效

    问题: 代码:<form action="/test/requestPost.do" method="post"> <input type=& ...

  10. python pandas 中文件的读写——read_csv()读取文件

    read_csv()读取文件1.python读取文件的几种方式read_csv 从文件,url,文件型对象中加载带分隔符的数据.默认分隔符为逗号read_table 从文件,url,文件型对象中加载带 ...