V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ksc010
V2EX  ›  编程

推荐前端同学一个chrome好用的功能,调试css即时保存到css

  •  
  •   ksc010 · 2013-08-20 11:06:34 +08:00 · 9208 次点击
    这是一个创建于 4104 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天调试css突然想到要是有这么一个功能就好了
    在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作
    然后就到网上搜了搜
    搜到了这个
    开发者调试工具Chrome Workspace
    http://ikarishinjieva.github.io/blog/blog/2013/03/05/chrome-workspace/
    http://isux.tencent.com/chrome-workspace.html
    15 条回复    1970-01-01 08:00:00 +08:00
    momou
        1
    momou  
       2013-08-20 11:31:00 +08:00
    不错
    lambdaq
        2
    lambdaq  
       2013-08-20 12:01:27 +08:00
    今年 2013 IO 上看到这个功能了。很好。就等chrome devtool 调试mobile safari 接口和 sublime 的js调试定位+自动刷新页面功能了。
    awebird
        3
    awebird  
       2013-08-20 12:19:40 +08:00
    直接用fiddler重定向到开发目录的css
    wwwjfy
        4
    wwwjfy  
       2013-08-20 13:16:35 +08:00
    0bit
        5
    0bit  
       2013-08-20 13:29:58 +08:00
    JetBrains家的IDE,装上Live Edit的插件就可以实现这个了。也挺好用的。
    0bit
        6
    0bit  
       2013-08-20 13:33:49 +08:00
    再加上一句,配合上 File Watchers 插件,就可以一边写着LESS,一边在浏览器看着结果了。
    Mutoo
        7
    Mutoo  
       2013-08-20 13:41:20 +08:00
    @0bit 人家要反向的,浏览器 to file...
    xdata
        8
    xdata  
       2013-08-20 17:29:04 +08:00
    怎么最新版的Chrome Dev好像不太一样?
    默认有workspace设置,但是里面没有mappings设置
    设置好文件夹之后,sources默认显示出来,但是设置里,experiments没有那个选项...

    总之还是无效...奇怪
    ksc010
        9
    ksc010  
    OP
       2013-08-21 08:56:52 +08:00
    @xdata 你workspace里面都有什么?
    xdata
        10
    xdata  
       2013-08-21 09:24:58 +08:00
    @ksc010
    我在workspace里把文件夹添加了,然后点击一下添加好的文件夹,弹出新增mappings设置.
    设为 file:///D:/<FOLDER_PATH>, D:\<FOLDER_PATH>
    然后会自己在最后加上斜杠.
    现在Ctrl+O只搜到一个文件路径, 在sources里也可以修改后Ctrl+S保存(保存成功的).手工刷新页面后可以看到最新的修改.

    但是在Elements,Styles侧边栏,直接修改CSS,
    却没像顶楼腾讯那篇文章里面说的会自动保存,并将修改体现在源文件中.
    jasya
        11
    jasya  
       2013-08-21 09:31:41 +08:00
    ksc010
        12
    ksc010  
    OP
       2013-08-21 10:08:10 +08:00
    @xdata 你子啊映射的本地目录 添加 .allow-devtools-edit 文件了没?
    ksc010
        13
    ksc010  
    OP
       2013-08-21 10:10:26 +08:00
    @jasya 嗯这个效果也很好
    要是能支持notepad++就好了
    justfindu
        14
    justfindu  
       2013-08-21 10:18:13 +08:00
    firefox就有的~ 自带的开发工具~ 可以直接保存~
    ksc010
        15
    ksc010  
    OP
       2013-08-22 11:14:40 +08:00
    @xdata 我今天升级到了chrome29 发现跟你的情况一样了
    原来右侧直接是css文件的本地路径
    现在变成 matched css Rules 了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1190 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 23:02 · PVG 07:02 · LAX 15:02 · JFK 18:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.