干掉F5,无需配置轻松实现浏览器页面自动刷新

摘要

在写web页面的时候大家肯定都干过这种事情:先在编辑器里改一个CSS属性,保存再切回浏览器刷新页面看效果。尤其是对于追求像素完美的同学,简直石乐志,大了小了1px都要来回改。

本文介绍了一种让检测文件变化让浏览器自动刷新的办法,无需配置,操作简单。特别是对于屏幕大甚至有双屏三屏四五屏的同学,不要太爽哦!

准备工作

这种方法需要使用chrome浏览器,以及两个npm的包。关于npm不再多说,有大把文章教你怎么安装,还有更换成淘宝的镜像使用cnpm加快下载速度。

  1. 先用npm安装两个包 npm install -g anywhere livereload

  2. chrome浏览器安装livereload的插件(点我安装)

搞起

  1. 在终端里进入到项目的文件夹,运行anywhere,一切顺利的话应该自动跑起了一个web server,并且自动在浏览器里打开了index.html。如果默认端口被占用还可以加-p命令运行到指定端口,例如anywhere -p3000

  2. 再开一个终端进入到项目的文件夹,运行livereload

  3. 在chrome浏览器中激活livereload!
    chrome中激活livereload

完工

效果展示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值