文档章节

【已解决】安装好livereload chrome插件后不能用怎么办?

金大宝
 金大宝
发布于 2017/08/02 20:32
字数 666
阅读 89
收藏 0
点赞 0
评论 0

作为一个曾经的WEB开发,这边只要在sublime中写完代码保存后,按下ctrl+s保存后,浏览器自动刷新页面, 就能直接查看效果,不需要切换到浏览器中再按F5刷新。如果再弄个双屏开发,那

作为一个曾经的WEB开发,这边只要在sublime中写完代码保存后,按下ctrl+s保存后,浏览器自动刷新页面, 就能直接查看效果,不需要切换到浏览器中再按F5刷新。如果再弄个双屏开发,那简直就是太爽了。当然这一切离不开LiveReload插件。其实livereload插件的自动刷新功能非常好用,但是对于新手来说可能会碰到一些问题,比如:安装好livereload chrome插件后不能用?
livereload插件
今天在网络上看到一个新手的提问,为什么说他是新手呢,呵呵。看了问题大家就知道了。他说:在chrome安装LiveReload插件后为空心,点击插件提示出现:
livereload报错
这位同学其实搞错了一些非常重要且基础的事情,要想livereload插件的功能,要用sublime 打开的页面才可以运行livereload,当然sublime那里也还要加载livereload插件,添加一些代码。下面我们来仔细介绍一下。

1.在chrome浏览器中安装livereload插件的方法我想应该不用多介绍了。方法参照:离线安装CRX格式chrome插件的方法

2.安装livereload插件成功后,进入chrome扩展程序页面,将livereload中的允许访问文件网址打上勾。
 

 3.sublime安装LiveReload。 

sublime text3的package control中的livereload插件的方法

windows系统中:

1.用户可以在https://github.com/Grafikart/ST3-LiveReload 下载到可用的livereload,直接下载到本地或clone均可 。你会得到一个插件包,将该文件夹重命名为LiveReload,然后将其手工放入 sublime text3的Packages目录中,此文件夹是隐藏文件夹,默认地址为 

C:\Users\your_user_name\AppData\Roaming\Sublime Text 3\Packages 

livereload

Linux系统中:

cd ~/.config/sublime-text-3/Packages  

rm -rf LiveReload  

git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload  

sublime-text3中livereload的配置方法:

preferences -> Packge Settings -> LiveReload -> Settings - User 

 

livereload插件
最后,重启 Sublime text3和Chrome,点击 Chrome的LiveReload 图标,空心变实心,LiveReload启动并连接成功 。打开某个html文件,在chrome中打开,点击LiveReload图标,可以看到中心由空心圆点变为实心圆点,代表启动成功,这时返回sublime中,可以看到左下角出现LiveReload连接成功的提示 :
livereload安装成功

© 著作权归作者所有

共有 人打赏支持
金大宝
粉丝 1
博文 11
码字总数 1021
作品 0
廊坊
Grunt+Livereload 搭建本地前端开发环境

要解决什么问题? 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了。 开发angular的时候,官方的chrome插件对file:///的支持不好,所以最好在web浏览...

天猪
2013/06/24
0
5
livereload的使用

安装livereload的浏览器插件 我平时使用的是chrome,在google应用商店下载插件的地址是 https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei 用其他浏览...

xbuding
2016/05/26
80
0
web前端开发之热加载—liveReload(浏览器自动刷新)

今天主要写一下,如何配置,保存前端代码后,浏览器自动刷新的功能,双屏操作,真的会方便很多,对于前端开发来说,一边写样式,一边看效果,爽翻~ 图片发自简书App 一、开发环境 1.电脑系统...

会会萌萌哒
2017/12/26
0
0
如何强制浏览器使用chrome内核

flex布局不支持低版本ie内核是确定了,没办法的改变的事实,但是国产浏览器采用哪一个内核打开你的页面,这个是你可以控制的。在html的标签中加入如下代码: 然后浏览器打开你的页面时,会默...

Roy-skywalker
06/12
0
0
RDP连接远程桌面,Chrome浏览器下声音不流畅的原因

使用RDP协议连接远程桌面时,用Google Chrome浏览器听音乐和观看视频,输出的声音会间隙停顿,效果不佳。原因是Chrome浏览器缺省集成的Pepper Flash插件不能很好的兼容RDP协议。请按一下步骤...

yangtzi
06/26
0
0
gulp自动刷新浏览器

项目本地后端开发语言是是基于apache的php,域名为cloud.xxx.com。刚开始想实现浏览器F5自动刷新使用到的是grunt和livereload插件,gulp也有对应的方法,移步「gulp教程之gulp-livereload」。...

cobish
2016/04/14
1K
0
吐血推荐珍藏的 Chrome 插件二

了解我的人知道,我一直是 Chrome 的死忠粉,Chrome 那丰富的插件可能是我这么钟爱 Chrome 的原因之一,我在去年的时候写过一篇文章,推荐了一些我常用的 Chrome 插件给大家,很多读者是因为...

stormzhangV
2017/07/12
0
0
Chrome浏览器安装postman插件

安装postman不能访问chrome应用商店的解决方法 需要离线下载.crx插件,并根据参考资料进行操作。 注: 1、如果把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar解压后报错...

哎小艾
06/29
0
2
gulp常用插件及其使用(更新2016-05-19)

一些常用的gulp插件 gulp的插件数量虽然没有grunt那么多,但也可以说是应有尽有了,下面列举一些常用的插件。 1 重命名 使用gulp-rename安装:npm install --save-dev gulp-rename用来重命名...

WolfX
2016/05/12
862
0
在PC上测试移动端网站和模拟手机浏览器的5大方法

最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多,最悲剧的事情就是我的手机是个经典的诺基亚,而且公司还不给配手机,这是有多讨厌,没办法,没有手机只...

大道至精
2014/10/10
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
26分钟前
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部