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

This topic created in 4678 days ago, the information mentioned may be changed or developed.

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

CSS

调试

开发者

15 replies • 1970-01-01 08:00:00 +08:00

momou

Aug 20, 2013

不错

tf2

Aug 20, 2013

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

awebird

Aug 20, 2013

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

wwwjfy

Aug 20, 2013

http://livestyle.emmet.io

0bit

Aug 20, 2013

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

0bit

Aug 20, 2013

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

Mutoo

Aug 20, 2013

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

xdata

Aug 20, 2013

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

总之还是无效...奇怪

ksc010

Aug 21, 2013

@xdata 你workspace里面都有什么？

xdata

Aug 21, 2013

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

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