说明

最近在研究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. MySQL为什么不推荐使用in

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 当使用IN语句时,MySQL可能会遇到以下问题: ...

  2. [转帖]Redis 内存淘汰策略 （史上最全）

    1.前言 Redis内存淘汰策略,是被很多小伙伴忽略的知识盲区,注意,是盲区. 注意,Redis如果内存淘汰策略配置不合理,可能会导致Redis无法服务. 所以,使用此文,对Redis内存淘汰策略专门 ...

  3. [转帖]Jmeter学习笔记（十九）——后置处理器之正则表达式的使用

    https://www.cnblogs.com/pachongshangdexuebi/p/11733005.html 一.正则表达式提取器的作用 允许用户从服务器的响应中通过使用perl的正则表达式 ...

  4. [转帖]Linux make: g++: Command not found

    https://www.cnblogs.com/kerrycode/p/4748606.html Linux使用make命令时遇到"make: g++: Command not found& ...

  5. [转帖]Unixbench的使用（综合性能测试、2D测试）和问题解决（跑不出多线程分数，调不出窗口，报错等）

    一.Unixbench简介 Unixbench一个基于系统的基准测试工具,不单纯是CPU 内存 或者磁盘测试工具.测试结果不仅仅取决于硬件,也取决于系统.开发库.甚至是编译器.Unixbench是一个 ...

  6. [转帖]ARM64体系结构编程与实践：基础知识

    ARM64体系结构编程与实践:基础知识 原创 异步社区 2022-03-30 12:44:16 著作权 文章标签 寄存器 体系结构 v8 ARM64体系结构 ARM 文章分类 物联网 阅读数1570 ...

  7. ESXi上面虚拟机磁盘损坏修复案例

    事故情况 最近同事反馈, 一个文件更新后出现了文件部分不可读的情况 具体现象为: 前端功能打开白屏 后端文件 前面93行不显示, notepad++打开都是 NULL 黑框. 然后重新覆盖文件, 有概 ...

  8. 记录一次RPC服务有损上线的分析过程

    1. 问题背景 某应用在启动完提供JSF服务后,短时间内出现了大量的空指针异常. 分析日志,发现是服务依赖的藏经阁配置数据未加载完成导致.即所谓的有损上线或者是直接发布,当应用启动时,service还 ...

  9. Vite 按需引入 Ant Design Vue 3.0

    Vite 按需引入 Ant Design Vue 3.0 第一步下载: npm i unplugin-vue-components -D 需要注意的是:Vite你可以用 unplugin-vue-co ...

  10. vue3中context.emit遇见的坑

    场景描述 今天遇见一个问题 ,子组件向上抛出去的事件. 被执行了两次,原因是 context.emit('click', item.id) 你的事件名是click 将click更改为其他事件名称,就可 ...