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

ideaa 发布于2019-08-01 16:35 / 3132人阅读

摘要：摘要在写页面的时候大家肯定都干过这种事情先在编辑器里改一个属性，保存再切回浏览器刷新页面看效果。本文介绍了一种让检测文件变化让浏览器自动刷新的办法，无需配置，操作简单。

摘要

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

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

准备工作

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

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

chrome浏览器安装livereload的插件（点我安装）

搞起

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

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

在chrome浏览器中激活livereload!

完工

服务器托管专线服务 F5刷新页面自动刷新页面js ajax实现页面刷新 js浏览器的刷新页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50619.html

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

摘要：摘要在写页面的时候大家肯定都干过这种事情先在编辑器里改一个属性，保存再切回浏览器刷新页面看效果。本文介绍了一种让检测文件变化让浏览器自动刷新的办法，无需配置，操作简单。摘要在写web页面的时候大家肯定都干过这种事情：先在编辑器里改一个CSS属性，保存再切回浏览器刷新页面看效果。尤其是对于追求像素完美的同学，简直石乐志，大了小了1px都要来回改。本文介绍了一种让检测文件变化让浏览器...

yangrd 2019-08-29 12:18 评论0 收藏0
干掉F5，无需配置轻松实现浏览器页面自动刷新

摘要：摘要在写页面的时候大家肯定都干过这种事情先在编辑器里改一个属性，保存再切回浏览器刷新页面看效果。本文介绍了一种让检测文件变化让浏览器自动刷新的办法，无需配置，操作简单。摘要在写web页面的时候大家肯定都干过这种事情：先在编辑器里改一个CSS属性，保存再切回浏览器刷新页面看效果。尤其是对于追求像素完美的同学，简直石乐志，大了小了1px都要来回改。本文介绍了一种让检测文件变化让浏览器...

lily_wang 2019-08-20 15:26 评论0 收藏0
浅谈浏览器缓存

摘要：最近在项目中遇到了浏览器因缓存问题未能成功向后端发送类型请求的，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结一下。是服务器响应消息头字段，在响应请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。最近在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结一下。在前端开发中，性能一直都...

godruoyi 2019-08-06 13:28 评论0 收藏0
浅谈浏览器缓存

摘要：最近在项目中遇到了浏览器因缓存问题未能成功向后端发送类型请求的，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结一下。是服务器响应消息头字段，在响应请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。最近在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结一下。在前端开发中，性能一直都...

shiina 2019-08-21 18:23 评论0 收藏0
Express结合Webpack的全栈自动刷新

摘要：如果修改的是里的文件，保存后，服务器将自动重启，浏览器会在服务器重启完毕后自动刷新。从开始首先，已经想到了开发流程中的自动刷新，这就是。在以前的一篇文章BrowserSync，迅捷从免F5开始中，我介绍了BrowserSync这样一个出色的开发工具。通过BrowserSync我感受到了这样一个理念：如果在一次ctrl + s保存后可以自动刷新，然后立即看到新的页面效果，那会是很棒的开...

Simon 2019-08-21 13:30 评论0 收藏0