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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4113 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天调试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 条回复 • 1970-01-01 08:00:00 +08:00

momou

2013-08-20 11:31:00 +08:00

不错

lambdaq

2013-08-20 12:01:27 +08:00

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

awebird

2013-08-20 12:19:40 +08:00

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

wwwjfy

2013-08-20 13:16:35 +08:00

http://livestyle.emmet.io

0bit

2013-08-20 13:29:58 +08:00

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

0bit

2013-08-20 13:33:49 +08:00

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

Mutoo

2013-08-20 13:41:20 +08:00

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

xdata

2013-08-20 17:29:04 +08:00

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

总之还是无效...奇怪

ksc010

2013-08-21 08:56:52 +08:00

@xdata 你workspace里面都有什么？

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

2013-08-21 09:31:41 +08:00

http://livestyle.emmet.io/

ksc010

2013-08-21 10:08:10 +08:00

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

ksc010

2013-08-21 10:10:26 +08:00

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

justfindu

2013-08-21 10:18:13 +08:00

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

ksc010

2013-08-22 11:14:40 +08:00

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