Ruby China

JavaScript 推荐启用 Chrome Workspace

camel · 2013年07月27日 · 最后由 larryzhao 回复于 2013年07月30日 · 12085 次阅读

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

8 个赞
tyaccp_guojian #1 2013年07月27日

coffeescript 和 scss 都可以吗？

martin91 #3 2013年07月27日

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

jie830413 #4 2013年07月27日

哇 这个真心不错

jjym #5 2013年07月27日

神器了...

camel #6 2013年07月27日

#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 吧

1 个赞
apprentice #7 2013年07月27日

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

8 楼 已删除
tyaccp_guojian #10 2013年07月27日

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

martin91 #11 2013年07月27日

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

jiyinyiyong #12 2013年07月28日

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

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

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