开发者调试工具Chrome Workspace
Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率。
之前这样的功能需要在本地开启一个sever端的服务。例如 autosave(https://github.com/NV/chrome-devtools-autosave),每次需要开启nodejs的sever端才能使用。
目前Chrome的正式版已经集成了这个功能,就方便了开发者许多,如何使用呢?
(如果你是使用Canary或者Chromiumde,Workspace已经不再是实验选项,跳过1,2项)
1.在 chrome://flags/ 中启用 Developer Tools Experiments (开发者工具实验)
2.在 Developer tools 设置 Experiments 选项下开启File system folders in Sources Panel,再重启Developer tools,就会多出Workspace选项。
3.Chrome为了确保安全,将目录添加到File systems时会要求在目录中存在.allow-devtools-edit文件,才允许开发者工具添加目录编辑保存文件,所以需要在资源目录中创建这个名字的空文件,方式有很多,例如:在资源目录中执行命令
Windows copy con .allow-devtools-edit 再 Ctrl + Z
Mac touch .allow-devtools-edit
4.在Workspace中把你的资源目录添加到File systems即可,如果CSS,JS链的是URL可以使用Mappings来设置路由(注意:结尾千万不要加上\,他逻辑只判断了是否以/结尾,否则就会变成path\/,略坑啊~~)
现在就可以在开发者工具中各种调试了,你就可以看到你的源文件也跟着改动啦~。
或者也可以在Sources中修改文件
缺陷
无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑
总之Workspace还是能在调试阶段帮助我们提升效率
建议继续学习:
- 网络数据包调试利器之wireshark (阅读:18254)
- Chrome和goagent的配置方法,你懂的 (阅读:15239)
- 内存越界的概念和调试方法 (阅读:6140)
- 警惕 Chrome 的查看源代码 (View Page Source) 功能 (阅读:5647)
- GDB中应该知道的几个调试方法 (阅读:5307)
- webapp网页调试工具Chrome Devtools (阅读:5040)
- 通过使用Chrome的开发者工具来学习JavaScript (阅读:4916)
- [译]Google Chrome中的高性能网络 (阅读:4860)
- chrome扩展应用开发教程之开发chrome应用基础 (阅读:4443)
- 如何制作chrome扩展程序 (阅读:4452)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:小盆宇 来源: 腾讯ISUX - 社交用户体验设计部 - 设计你的体验
- 标签: Chrome 调试
- 发布时间:2013-06-02 20:19:05
- [143] Go Reflect 性能
- [18] 公钥私钥加密解密数字证书数字签名详解
- [17] 基于HTTP缓存轻松实现客户端应用的离线支持
- [16] osx平台上lol英雄联盟launcher启
- [14] 我的git笔记
- [14] Joomla反序列化漏洞的查漏补缺
- [13] 在JavaScript中什么时候使用==是正
- [12] Linux内存中的Cache真的能被回收么?
- [12] SSL多域名绑定证书的解决方案
- [11] 相似度计算之马氏距离