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

[ksc010]

今天调试css突然想到要是有这么一个功能就好了
在开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作
然后就到网上搜了搜
搜到了这个
开发者调试工具Chrome Workspace
http://ikarishinjieva.github.io/blog/blog/2013/03/05/chrome-workspace/
http://isux.tencent.com/chrome-workspace.html

[momou]

不错

[tf2]

今年 2013 IO 上看到这个功能了。很好。就等chrome devtool 调试mobile safari 接口和 sublime 的js调试定位+自动刷新页面功能了。

[awebird]

直接用fiddler重定向到开发目录的css

[wwwjfy]

http://livestyle.emmet.io

[0bit]

JetBrains家的IDE，装上Live Edit的插件就可以实现这个了。也挺好用的。

[0bit]

再加上一句，配合上 File Watchers 插件，就可以一边写着LESS，一边在浏览器看着结果了。

[Mutoo]

@0bit 人家要反向的，浏览器 to file...

[xdata]

怎么最新版的Chrome Dev好像不太一样?
默认有workspace设置,但是里面没有mappings设置
设置好文件夹之后,sources默认显示出来,但是设置里,experiments没有那个选项...

总之还是无效...奇怪

[ksc010]

@xdata 你workspace里面都有什么？

[xdata]

@ksc010
我在workspace里把文件夹添加了,然后点击一下添加好的文件夹,弹出新增mappings设置.
设为 file:///D:/<FOLDER_PATH>, D:\<FOLDER_PATH>
然后会自己在最后加上斜杠.
现在Ctrl+O只搜到一个文件路径, 在sources里也可以修改后Ctrl+S保存(保存成功的).手工刷新页面后可以看到最新的修改.

但是在Elements,Styles侧边栏,直接修改CSS,
却没像顶楼腾讯那篇文章里面说的会自动保存,并将修改体现在源文件中.

[jasya]

http://livestyle.emmet.io/

[ksc010]

@xdata 你子啊映射的本地目录 添加 .allow-devtools-edit 文件了没？

[ksc010]

@jasya 嗯这个效果也很好
要是能支持notepad++就好了

[justfindu]

firefox就有的~ 自带的开发工具~ 可以直接保存~

[ksc010]

@xdata 我今天升级到了chrome29 发现跟你的情况一样了
原来右侧直接是css文件的本地路径
现在变成 matched css Rules 了