文档章节

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

金大宝
 金大宝
发布于 2017/08/02 20:32
字数 666
阅读 201
收藏 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
免代理下载安装纯净Chrome插件离线包

Chrome的插件非常好用, 作者还为此在简书开了一个文集Chrome插件英雄榜, 用于详细介绍一些小众插件的使用方法 我一般会在文章中附上插件在chrome商店的下载地址,但由于"墙"的存在, 很多小伙伴...

木子昭
09/16
0
0
web前端开发之热加载—liveReload(浏览器自动刷新)

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

会会萌萌哒
2017/12/26
0
0
五个值得尝试的前端开发工具

在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提...

oschina
2014/06/08
23.4K
13

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部