说明

最近在研究CSS希望可以提升一个层次。在写DEMO练习的时候老是需要去谷歌浏览器手动刷新页面才能看到更改后的效果次数多了 我也受不了,这不我又请来了个帮手: LiveReload,名如其人,这家伙专门干实时刷新。怎么整?看下面:

实现效果

配置步骤

1.vscode安装LiveRelod

插件处搜索安装即可,不多说。

2.启用LiveReload

vscode中按下快捷键ctrl+shift+p搜索配置:live
然后单击第一项,反复单击为启用/禁用 切换。

3.chrome浏览器中安装LiveReload插件

下载我给你们准备好的压缩包:【LiveReload210(解压后在谷歌浏览器插件里面加载).zip】
下载地址:
https://download.csdn.net/download/IndexMan/13683866

打开chrome的扩展程序–加载解压后的文件夹即可安装完成。

4.vscode和chrome联动

vscode中启用好LiveReload后随便打开一个html网页,然后点击chrome中安装好的LiveReload发现空心的○变成实心的●表示通信成功,

此时去修改html内容就会在chrome中实时刷新呈现。至此大功告成!

利用LiveReload插件实现vscode和谷歌浏览器实时刷新的更多相关文章

  1. 谷歌livereload插件使用

    1.插件下载地址:http://www.chromein.com/search_livereload_1.html 2.谷歌浏览器启用改插件 3.sublime 安装livereload插件,安装方法 ...

  2. Sublime Text 3配置LiveReload实现实时刷新

    今天看到一款很强大的插件,LiveReload,实时刷新,也就是说写完html/css/js等不用再到浏览器里按F5啦,在Ctrl+S时浏览器会自动刷新,是不是想想都很爽... Chrome:(据说支 ...

  3. 关于nagios系统下使用shell脚本自定义监控插件的编写以及没有实时监控图的问题

    关于nagios系统下shell自定义监控插件的编写.脚本规范以及没有实时监控图的问题的解决办法 在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主 ...

  4. 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收

    利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介   WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  5. gulp插件gulp-ruby-sass和livereload插件

    gulp-ruby-sass是gulp的一个插件,主要是用来实现sass编译,livereload插件主要是实现文件保存时浏览器自动刷新,避免了手动f5的频繁的操作 准备工作:chrome浏览器安装l ...

  6. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  7. 利用Chrome插件向指定页面植入js,劫持 XSS

    资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js ...

  8. Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面

    Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...

  9. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  10. 利用kibana插件对Elasticsearch查询

    利用kibana插件对Elasticsearch查询 Elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据. 查询分类: 基本查询:使用Elasticsear ...

随机推荐

  1. Go-数组-切片

  2. [转帖]VMware常用软件ISO下载汇总(2023年6月更新)

    https://www.dinghui.org/vmware-iso-download.html#vcsa-patch 请访问 www.dinghui.org 获得最新版,文章将持续更新.[最后更新时 ...

  3. [转帖]重置 VCSA 6.7 root密码和SSO密码

    问题描述 1.用root用户登录 VMware vCenter Server Appliance虚拟机失败,无法登录 2.vCenter Server Appliance 6.7 U1的root帐户错 ...

  4. [转帖]第5章 WINDOWS PE/COFF

    https://www.jianshu.com/p/35db9df2514f?utm_campaign=maleskine&utm_content=note&utm_medium=se ...

  5. [转帖]CentOS8完美升级gcc版本方法

    https://blog.whsir.com/post-6114.html 在CentOS8系统中,默认gcc版本已经是8.x.x版本,但是在一些场景中,还是需要高版本的gcc,网上一些作死的文章还在 ...

  6. [转帖]面对龙芯3A5000的逼迫,3A4000要为生存抗争!

      https://baijiahao.baidu.com/s?id=1709233817860985518&wfr=spider&for=pc 龙芯3A5000是龙芯中科自主设计的最 ...

  7. 手工创建一个带sticky模块的nginx镜像 并且实现容器化负载均衡的方法

    最近想进行容器化运行的nginx反向代理负载均衡服务. 找了一下 dockerhub上面的 nginx 发现里面不包含 sticky模块. 会报错为: nginx: [emerg] unknown d ...

  8. 【小分享】vm-storage中,计算metric的平均长度

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 表达式如下: sum by (type) (vm_cach ...

  9. 【K哥爬虫普法】百亿电商数据,直接盗取获利,被判 5 年!

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...

  10. 解决VS选择运行“在证书存储区中找不到清单签名证书”

     转:https://www.cnblogs.com/190196539/archive/2011/12/03/2272861.html 解决"在证书存储区中找不到清单签名证书" ...