Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS Auto Reload:解放F5 键,自动刷新浏览器的前端利器(Chrome 扩展)

CSS Auto Reload:解放F5 键,自动刷新浏览器的前端利器(Chrome 扩展)

作者头像
Jeff
发布于 2018-01-19 08:24:25
发布于 2018-01-19 08:24:25
2K0
举报
文章被收录于专栏:DeveWorkDeveWork

在进行前端开发的时候(本文具体而言是编辑CSS 文件时候),常常要做的是刷新浏览器查看修改后的样式。那么最常用到的就是F5 键了,以前在开发WordPress 主题的时候Jeff 都是傻傻按F5 刷新,一次开发下来F5 键的位置常常是油腻腻的,还担心坏了。不过,有了这个chrome扩展,一切都成为过去式;唉,相见恨晚啊~

CSS Auto Reload 介绍

css auto reload 是一款 chrome 开发者插件。它可以在你编辑 css 的时候,自动在页面上重新载入最新的 css 文件, 以达到立即展现你刚刚做的改变的目的。特别适合在双屏环境下进行 web 前端开发,使你不必在编辑器和浏览器之间不停的切换, 提高工作效率。

视频介绍

特性: 只需要安装一个 chrome 插件,不需要特殊的服务器端,不需要特意改变你的页面; 需要的时候,只需要点击一下插件栏的图标即可对当前页面开启监控,不需要的时候,再次点击以关闭; 此插件不会更改任何 DOM 结构,也不会在你页面的 js 执行环境中执行任何 js ,绝不干扰你页面的任何代码; 在你没改变 css 的时候,页面不会 reload css ,调试面板中网络一栏不会多出很多请求(除了file://方式打开的页面) 支持 css 和 page 不同域的情况; 支持 css 相对路径,绝对路径; 支持 @import , @import 进来的 css 如果发生了改变也会 reload; 部分支持 file:// 打开的页面;

下载地址:

chrome商店下载 项目主页 Github

后记

去查看了下该插件的源代码,其本身核心功能就是用javascript 实现的,但我看不懂代码,想研究研究还是没戏了。事实上,这个功能确实是非常有用,如果你编辑过前端代码的话你就会知道,so,有需要的速速收藏吧~~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013/10/15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WebStorm绑定Chrome浏览器实现实时自动刷新
1、Ctrl + Alt + S 打开设置 找到 Build, Execution, Deployment --> Debugger  -->  Live Edit --> 将 Update 修改为 Auto in (ms),如下图:
德顺
2019/11/13
7.3K0
WebStorm绑定Chrome浏览器实现实时自动刷新
用 CodeBuddy 造自动刷新插件,手速快到连 F5 键都怀疑人生!
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
Undoom
2025/05/13
1470
用 CodeBuddy 造自动刷新插件,手速快到连 F5 键都怀疑人生!
让 F5 歇一会儿——laravel-mix 自动刷新之道
原文链接:https://segmentfault.com/a/1190000018863373
猿哥
2019/04/24
2.6K0
让 F5 歇一会儿——laravel-mix 自动刷新之道
构建初级前端页面重构开发环境
本文主要面对前端初级新手,是我从事前端项目外包这一年多时间里积累的经验,提供一系列的工具和资料来帮助新手更高效的从事前端开发。但是由于本人水平有限,所以只能写一些初级的方法和工具。没有添加诸如 grunt 这类的更高级的工具,因为我对这块目前还没有很多实战经验。
Denis
2023/04/14
5360
构建初级前端页面重构开发环境
你的浏览器,何必是浏览器
工欲善其事,必先利其器,作为大学生或者从业人员,如果能熟练地使用各种工具来提高自己的工作学习效率必然是一件好事!!!
小孙同学
2022/01/17
3.1K0
你的浏览器,何必是浏览器
JavaScript实现F5效果,清空缓存并刷新页面
浏览器在加载和显示网页时,会根据不同的情况,决定是否重新从服务器获取网页内容或使用缓存中的内容。缓存是指浏览器在本地存储的一些网页资源,如图片、CSS、JS等,以便于下次访问时快速加载,提高用户体验和网站性能。
德顺
2023/08/25
8.2K0
【前端】前端学习必备之Chrome调试代码技巧
打开 Chrome 浏览器,我们可以通过多种方式打开调试工具,最常见的两种方法是:
CSDN-Z
2025/05/29
1360
【前端】前端学习必备之Chrome调试代码技巧
面向前端开发人员的VSCode自动化插件
编程是复杂的。在保证高生产力和代码质量的同时,有许多最优的方案需要记住,有许多准则需要遵循,还有许多 "已知问题 "需要避免。
葡萄城控件
2021/04/07
1.1K0
面向前端开发人员的VSCode自动化插件
检测CSS和JS改动自动刷新脚本
当我们在修改主题样式后,经常要做的一个重复动作就是按F5刷新网页,今天介绍一款神奇的小工具,可以检测CSS和JavaScript文件的变化,并自动刷新网页的JS脚本Live.js。
星哥玩云
2022/06/11
3.1K0
前端开发介绍(包含调试什么的)
http://www.cnblogs.com/jikey/p/4259360.html
bear_fish
2018/09/19
1.5K0
前端开发介绍(包含调试什么的)
Google Chrome不仅仅是浏览器
作为一名开发者,选择一个好的开发工具可以起到事半功倍的作用,正所谓:工欲善其事必先利其器!Google Chrome作为广大网民的一款首选浏览器,又不仅仅局限于浏览器,还自带或扩展了很多协助开发人员的插件和工具,帮助开发者们大大的提高了开发效率和便利。
程序大视界
2022/12/19
6670
Google Chrome不仅仅是浏览器
Chrome使用技巧(几个月的心得)
转用Chrome,不仅仅因为它的插件之丰富,更因为它的响应速度其他浏览器都望尘莫及。接着我就要写写一些心得。
牧云云
2022/03/10
7880
Chrome使用技巧(几个月的心得)
神兵利器推荐——你一定不能错过的chrome插件
最近有朋友问我,有没有什么可以提升效率的chrome插件推荐一下。我看了一下我的插件库,好用的还真不少。既然要推荐给一个人,还不如整理出来,分享给所有需要的人。毕竟,极致利他才能最终利己嘛。
职场亮哥
2020/12/10
1.7K0
神兵利器推荐——你一定不能错过的chrome插件
浏览器是如何进行页面渲染的
作为前端开发,我们的日常工作中除了写代码之外,几乎大多数的时间都在跟浏览器打交道。当然,现在我们甚至写代码都可以直接在浏览器里完成,一个浏览器走天下。
被删
2024/07/26
5950
浏览器是如何进行页面渲染的
【CSS前置知识】重新认识浏览器那些事
实在有太多文章详解「浏览器运行机制」了,笔者本次以CSS方向的角度谈谈浏览器那些事,CSS虽简单,但是其前置知识也是一个很重要的部分。希望本文能帮各位同学重新认识浏览器那些事。
JowayYoung
2020/11/23
5960
【CSS前置知识】重新认识浏览器那些事
使用浏览器这么多年,你真的了解DevTools吗?
点击上方蓝字“ITester软件测试小栈“关注我,每周一、三、五早上 09:00准时推送,每月不定期赠送技术书籍。
可可的测试小栈
2022/11/11
1.2K0
使用浏览器这么多年,你真的了解DevTools吗?
浏览器架构学习
在从事前端开发过程中,浏览器作为最重要的开发环境,浏览器基础是是前端开发人员必须掌握的基础知识点,它贯穿着前端的整个网络体系。对浏览器原理的了解,决定着编写前端代码性能的上限。浏览器作为JS的运行环境,学习总结下现代浏览器的相关知识
RubyLiao廖彩明
2018/12/25
1.3K0
浏览器架构学习
浏览器缓存知识小结及应用
阅读目录 1. 浏览器缓存基本认识 2. 强缓存的原理 3. 强缓存的管理 4. 强缓存的应用 5. 协商缓存的原理 6. 协商缓存的管理 7. 浏览器行为对缓存的影响
wangxl
2018/07/27
7410
浏览器缓存知识小结及应用
Google Chrome 浏览器 开发者工具 使用教程
对于Chrome 浏览器,除了占用内存的缺点,其他都很不错。对于Chrome 浏览器的开发者工具,Jeff 除了Elements、Resources、Network、Console这四个标签页用得比较多外,其他的都甚少理解。今天偶然看到一篇Chrome 浏览器开发者工具的使用教程,感觉不错,顺便转载在这里,感谢原作者的辛苦劳动。 作为一个Web开发人员,除了上面的原因以外,与我们开发相关的,就是Chrome的开发者工具。而本文,就是要详细说说Chrome的开发者工具,说说我为什么认为它比Firebug要好用
Jeff
2018/01/19
5.1K0
Google Chrome 浏览器 开发者工具 使用教程
JGulp: 利用Gulp 配置的前端项目自动化工作流
商业竞争时代的Web 开发,效率越来越成为其中决胜的关键因素之一。在前几年的时候,前端是一片荒芜的待开垦之地,开发者更多考虑开阔更多技术疆域;而最近几年,在前端技术这种更新迭代快到连裸奔都追不上的情况下,在强调高产的同时,效率必然是成为争夺的制高点。 引子 在苦苦构思了上面的开头后,从“效率”这个词Jeff 引出了今天话题——也就是标题说的前端项目自动化工作流。也许你还不全懂诸如“前端自动化”“工作流(workflow)”这些名词,不急且让我列举下面的场景: 在刚刚过去的时代(恩对于很多人来说是他们正在经历
Jeff
2018/01/22
1.2K0
JGulp: 利用Gulp 配置的前端项目自动化工作流
相关推荐
WebStorm绑定Chrome浏览器实现实时自动刷新
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档