Developer Tools 里修改后直接同步到文件,Chrome 要成为前端编辑神器了
重启 Chrome,启用 File system folders in Sources Panel
配置 Workspace
https://developers.google.com/chrome-developer-tools/docs/settings#workspace
Enjoy
coffeescript 和 scss 都可以吗?
试了不行哦
#1 楼 @tyaccp_guojian 这两个应该是不行的吧,之前有一个 coffeescript 的插件,支持直接调试。
哇 这个真心不错
神器了...
#1 楼 @tyaccp_guojian #3 楼 @Martin91 所有文件均可编辑,注意是所有 如果启用 source map,CoffeeScript 和 SCSS 都可以直接编辑
DevTools 主要有两个用途: 一个是作为文件编辑器,你可以直接在 workspace 里添加file systems(目录),然后它就是文本编辑器了,所以 ruby, python 都是可以编辑的。
file systems
另一个是杀手级功能,使用网页调试跟踪到 JS/CSS 文件,直接修改 JS/CSS 后 CMD+S,修改马上生效,网页不需刷新,且同时保存到文件,这之前要做一下Mappings
Mappings
#3 楼 @Martin91 你说的是 source map 吧
从上周开始这么用,用来调试真的很爽。看 google 程序员录的网页开发流程的视频,基本所有的开发都用 dev tool。也支持快捷键打开文件
#7 楼 @apprentice Sure http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/ Awesome CMD+O
CMD+O
可以了,但是修改样式以后页面不重新加载,还是得刷新呀
#6 楼 @camel 嗯嗯,谢谢了,我露下限了。。。下次试试。
完了几次,觉得有问题. JS 编辑需要的快捷键比较多,还有代码高亮,内嵌的 CodeMirror 不够方便 CSS 在 Elements panel 编辑以后会直接保存在 CSS 文件里,不适合代码的结构化 调试工具可以避免手动刷新,但如果用了其他自动刷新的工具,会造成重复刷新 我不大喜欢这个用法,小的调试可以用..
也听到有声音认为 Google 方案不够好的 http://kenneth.io/blog/2013/05/21/our-web-development-workflow-is-completely-broken/
太屌了