V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
allenm
V2EX  ›  分享创造

分享自己做的 chrome 插件, css auto reload

  •  
  •   allenm · 2012-05-24 17:37:47 +08:00 · 5146 次点击
    这是一个创建于 4564 天前的主题,其中的信息可能已经有所发展或是发生改变。
    做为一个 web developer ,在写 css 的时候,经常需要不断的切换窗口,刷新页面,查看效果,这个插件可以在你保存好 css 后,立即更新你页面上的样式,不用切换窗口、刷新。

    操作视频:


    这个之前已经有一些类似的工具,但是有些不支持跨域,有些不支持 @import 进来的 css ,有些还要配置一个特殊的服务器端,可能会和当前工作环境冲突。

    于是我就自己写了一个适合自己用的,看看特性吧:

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

    chrome extension 下载地址:https://chrome.google.com/webstore/detail/fiikhcfekfejbleebdkkjjgalkcgjoip

    github 地址:https://github.com/allenm/css-auto-reload

    欢迎使用,提建议和 BUG 。
    21 条回复    1970-01-01 08:00:00 +08:00
    allenm
        1
    allenm  
    OP
       2012-05-24 18:13:33 +08:00
    其实已经发布到 webstore 好久了,只是今天刚修复了两个BUG,就想到来 V2EX 宣传下,看看有没有人能用上。
    gDD
        2
    gDD  
       2012-05-24 18:21:42 +08:00
    既然放到GitHub上了,那就 加个License吧,推荐MIT。
    allenm
        3
    allenm  
    OP
       2012-05-24 18:24:42 +08:00
    @gDD THX,有空了我给加个 License
    unstop
        4
    unstop  
       2012-05-24 18:24:51 +08:00
    可以让它也支持HTML甚至后端代码的修改刷新就更牛逼了。
    allenm
        5
    allenm  
    OP
       2012-05-24 18:26:33 +08:00
    @unstop 这个想做也是可以的。只是根据目前工作中观察到的情况,切换窗口,刷新页面,最多的时候,就是写 css 的时候。
    hzlzh
        6
    hzlzh  
       2012-05-24 19:15:57 +08:00
    我一直用 LiveReload.app 可以试试,效率很高,支持后端代码也
    deepure
        7
    deepure  
       2012-05-24 20:45:10 +08:00
    白天试了一下没生效,回头再试试
    allenm
        8
    allenm  
    OP
       2012-05-24 21:13:34 +08:00
    @deepure 可以描述下你在什么环境下使用吗?比如 HTML 是什么样的?server 端是什么样的。可以邮件交流 menghonglun [at] gmail.com
    Kaiyuan
        9
    Kaiyuan  
       2012-05-24 21:16:35 +08:00
    我记得之前看 css-tricks 有介绍过一个工具是你修改了本地文件之后 chrome 就马上刷新页面的。我就一直好奇为什么 Dreamweaver 不能直接调用浏览器直接即时预览效果。而且要转到浏览器本身浏览。
    allenm
        10
    allenm  
    OP
       2012-05-24 21:45:12 +08:00
    @Kaiyuan 现在用 Dreamweaver 的比较少了吧。用编辑器直接调用浏览器展示,这个也是可以做到的,只是用这种插件的形式,会更通用一点,和编辑器无关,和服务器无关。
    zern
        11
    zern  
       2012-05-24 21:50:00 +08:00   ❤️ 1
    试试。。点了,为什么没有反应呢,一直忙
    allenm
        12
    allenm  
    OP
       2012-05-24 21:52:57 +08:00
    @zern 点的什么?什么一直忙?
    fly2never
        13
    fly2never  
       2012-05-24 21:55:15 +08:00
    赞,虽然用不上...
    zern
        14
    zern  
       2012-05-24 22:04:11 +08:00
    @allenm 点那个圈A的图标啊,点了没什么反应,有时候会出现忙。
    allenm
        15
    allenm  
    OP
       2012-05-24 22:11:08 +08:00
    @zern 点了是没反应啊,你要 coding 才能看到效果。看操作视频中的操作了吗?如果你改变了 css ,页面没有及时更新,你可以发邮件告诉我你当前的开发环境吗?比如 HTML 是什么样子的,服务器用的是什么。 menghonglun [at] gmail.com
    Kaiyuan
        16
    Kaiyuan  
       2012-05-24 22:19:17 +08:00
    @Kaiyuan 其实用 Dreamweaver 的一般都是设计师,相对来说并不擅长直接文本写代码,即使有 Sublime Text 2 这样的编辑器也是,所以需要一个即时预览方案,而 Dreamweaver 应该要集成这样的功能才对。LiveReload.app 不错,不过只有 Mac 版本,Windows 版本只是一个预览。
    dianso
        17
    dianso  
       2012-05-24 22:22:43 +08:00
    安装了!
    mmz0717
        18
    mmz0717  
       2012-11-19 16:07:51 +08:00
    我也安装来,但是没有效果!
    allenm
        19
    allenm  
    OP
       2012-11-19 16:29:44 +08:00
    @mmz0717 可以说说你的使用场景吗?
    allenm
        20
    allenm  
    OP
       2012-11-19 16:30:50 +08:00
    @mmz0717 方便的话,可以和我邮件或者 gtalk 沟通: menghonglun囧gmail.com
    allenm
        21
    allenm  
    OP
       2012-11-19 16:56:00 +08:00
    发现有同学使用 file:// 打开页面,发现此插件无效,现在此插件的最新版已经支持了 file:// 打开的页面,只是由于 chrome 的安全限制,需要手工配置下,详见:http://allenm.github.com/css-auto-reload/#fileconfig
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5332 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 07:48 · PVG 15:48 · LAX 23:48 · JFK 02:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.