利用LiveReload插件实现vscode和谷歌浏览器实时刷新

说明

最近在研究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中实时刷新呈现。至此大功告成！

posted @ 2020-12-14 10:42  一锤子技术员  阅读(3)  评论(0)  编辑  收藏  举报  来源