利用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中实时刷新呈现。至此大功告成!

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
回答: 如果你想在VsCode中配置谷歌浏览器,你可以使用一个名为LiveReload插件。这个插件可以实现在保存代码后自动刷新浏览器页面的功能。安装了LiveReload插件后,你需要在VsCode的设置中进行一些配置。你可以打开设置界面,搜索"liveReload.server"并将其设置为"browser"。然后,你需要指定你所使用的浏览器的路径。可以通过在设置中搜索"liveReload.browser"来找到浏览器路径的配置选项,并将其设置为谷歌浏览器的路径。完成这些配置后,当你保存代码时,谷歌浏览器将自动刷新以显示更改后的效果。这样可以减少你频繁切换页面与编译器的繁琐操作。12 #### 引用[.reference_title] - *1* [配置VSCode谷歌浏览器插件 文件保存后,浏览器页面自动刷新](https://blog.csdn.net/clli_Chain/article/details/110069968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *2* [(已解决)利用LiveReload插件实现vscode谷歌浏览器实时刷新](https://blog.csdn.net/qq_40903527/article/details/124113710)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值