文档章节

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

金大宝
 金大宝
发布于 2017/08/02 20:32
字数 666
阅读 129
收藏 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
如何强制浏览器使用chrome内核

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

Roy-skywalker
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
32分钟前
3
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
40分钟前
1
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
50分钟前
19
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
1
0
区块链技术中的那些能商用的企业级应用

WEPOWER是一家立陶宛初创企业,旨在改变可再生电力项目的付费方式。WePower公司创始人Nick Martyniuk表示,政府统一收购价的存在推动了全球风能与太阳能市场的发展。因此,他的公司希望帮助那...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部