我们在编写前端代码时,写好一部分代码时想要看一看代码的实现效果,每次都要手动刷新会非常麻烦,神器来了,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. 我好像发现了一个Go的Bug?

    从一次重构说起 这事儿还得从一次重构优化说起. 最近在重构一个路由功能,由于路由比较复杂,需求变化也多,于是想通过责任链模式来重构,刚好这段时间也在 Sentinel-Go 中看到相关源码. 用责任链 ...

  2. 内存管理——new delete expression

    C++申请释放内存的方法与详情表 调用情况 1.new expression new表达式在申请内存过程中都发生了什么? 编译器将new这个分解为下面的主要3步代码,①首先调用operator new ...

  3. Java实现单链表的增删查改及逆置打印

    //所提供的接口 LinkList.java package Struct; public interface LinkList {//判断链表为空public boolean linkListIsE ...

  4. CentOS6设置Django开发环境

    今天在我的Centos6.5机器上安装 Django 开发环境,在安装完使用 "django-admin.py startproject myapp" 创建应用的时候报了下面的错误 ...

  5. spring cloud config center Git SSH configuration

    Git SSH configuration using properties By default, the JGit library used by Spring Cloud Config Serv ...

  6. 看看线程特有对象ThreadLocal

    作用:设计线程安全的一种技术. 在使用多线程的时候,如果多个线程要共享一个非线程安全的对象,常用的手段是借助锁来实现线程的安全.线程安全隐患的前提是多线程共享一个不安全的对象 ,那么有没有办法让线程之 ...

  7. ssm+ajax实现登陆

    ssm的搭建见上一章 1.数据协议层 public User selectByLoginnameAndPassword(@Param("loginname")String logi ...

  8. Grafana 任意文件读取漏洞 (CVE-2021-43798)学习

    漏洞概述 Grafana是一个跨平台.开源的数据可视化网络应用程序平台.用户配置连接的数据源之后,Grafana可以在网络浏览器里显示数据图表和警告. Grafana 的读取文件接口存在未授权,且未对 ...

  9. MySQL数据库行转列

    一.数据源如下所示 二.对应SQL语句如下所示 -- 行转列 SELECT t1.`产品名称`, SUM(CASE t1.`日期` WHEN '2019-11-11' THEN t1.`数量` ELS ...

  10. 安装Redis5.0.8教程图解

    文档:安装Redis5.0.8教程图解.note 链接:http://note.youdao.com/noteshare?id=737620a0441724783c3f8ef14ab8a453& ...