JavaScript 推荐启用 Chrome Workspace

camel · 发布于 2013年07月27日 · 最后由 larryzhao 回复于 2013年07月30日 · 9612 次阅读
558

Developer Tools里修改后直接同步到文件,Chrome要成为前端编辑神器了

  1. 升级 Chrome
  2. 启用 Developer Tools Experiments via chrome://flags
  3. 重启 Chrome,启用 File system folders in Sources Panel

  4. 配置 Workspace

https://developers.google.com/chrome-developer-tools/docs/settings#workspace

Enjoy

共收到 13 条回复
5453

coffeescript和scss都可以吗?

5453

试了不行哦

4755

#1楼 @tyaccp_guojian 这两个应该是不行的吧,之前有一个coffeescript的插件,支持直接调试。

96

哇 这个真心不错

2622

神器了...

558

#1楼 @tyaccp_guojian #3楼 @Martin91 所有文件均可编辑,注意是所有 如果启用source map,CoffeeScript和SCSS都可以直接编辑

DevTools主要有两个用途: 一个是作为文件编辑器,你可以直接在workspace里添加file systems(目录),然后它就是文本编辑器了,所以ruby, python都是可以编辑的。

另一个是杀手级功能,使用网页调试跟踪到JS/CSS文件,直接修改JS/CSS后CMD+S,修改马上生效,网页不需刷新,且同时保存到文件,这之前要做一下Mappings

#3楼 @Martin91 你说的是source map吧

96

从上周开始这么用,用来调试真的很爽。看google程序员录的网页开发流程的视频,基本所有的开发都用dev tool。也支持快捷键打开文件

8楼 已删除
5453

可以了,但是修改样式以后页面不重新加载,还是得刷新呀

4755

#6楼 @camel 嗯嗯,谢谢了,我露下限了。。。下次试试。

90

完了几次, 觉得有问题. JS 编辑需要的快捷键比较多, 还有代码高亮, 内嵌的 CodeMirror 不够方便 CSS 在 Elements panel 编辑以后会直接保存在 CSS 文件里, 不适合代码的结构化 调试工具可以避免手动刷新, 但如果用了其他自动刷新的工具, 会造成重复刷新 我不大喜欢这个用法, 小的调试可以用..

也听到有声音认为 Google 方案不够好的 http://kenneth.io/blog/2013/05/21/our-web-development-workflow-is-completely-broken/

2408

太屌了

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册