开发者调试工具Chrome Workspace

13

开发者调试工具Chrome Workspace

小盆宇

Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率。

之前这样的功能需要在本地开启一个sever端的服务。例如 autosavehttps://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选项。
File-system-folders-in-Sources-Panel

3.Chrome为了确保安全,将目录添加到File systems时会要求在目录中存在.allow-devtools-edit文件,才允许开发者工具添加目录编辑保存文件,所以需要在资源目录中创建这个名字的空文件,方式有很多,例如:在资源目录中执行命令

Windows copy con .allow-devtools-editCtrl + Z

cmd

Mac touch .allow-devtools-edit

4.在Workspace中把你的资源目录添加到File systems即可,如果CSS,JS链的是URL可以使用Mappings来设置路由(注意:结尾千万不要加上\,他逻辑只判断了是否以/结尾,否则就会变成path\/,略坑啊~~)
workspace

现在就可以在开发者工具中各种调试了,你就可以看到你的源文件也跟着改动啦~。
dev-edit

或者也可以在Sources中修改文件
sources

缺陷
无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑
总之Workspace还是能在调试阶段帮助我们提升效率

Tags: ,

小盆宇
小盆宇
上一遍
下一遍
QQ空间 腾讯微博 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. 独自流浪 says:

    这个Wordspace是不错喔,这样的话,Chrome就不单单是调试工具了,更能直接当开发工具用

  2. tcdona says:

    微调神器

  3. kazaff says:

    按照步骤设置后,修改了无法保存还是~~

    我是在mac下的chrome v27下测试的,不知道遗漏了什么?

    是在DeveloperTools面板下修改后自动保存的么?还是需要手动?如何手动呢?

    • 小盆宇 小盆宇 says:

      首先检查一下你的路由有没有设置正确,你可以在Sources下面用ctrl+O,搜索引用的文件名字,如果只有本地路径的就没有问题,如果出现2个同名文件,则设置没有成功,检查一下路由的设置,目录有没有正确

  4. pw says:

    是否能支持本地编辑器修改源码后浏览器自动 reload?

  5. 一丝 says:

    Chromium 最新版已经支持调试和保存 Sass 文件。

  6. bold says:

    不支持sftp

  7. Don says:

    这太牛逼了!梦想成真。

  8. Frank says:

    当 css 文件链接含querystring的时候,不起作用,比如 http://www.mydomain.com/style.css?tyyxthp

  9. Vince says:

    不知道火狐有没有类似的功能呢?

  10. Ethan Lai says:

    体验了一翻,很厉害,但也目前还是有一些缺陷,如无法过滤文件,有些文件不想自动保存,公共组件之类的;另外跟原本的调试方式也有冲突,原来你可以很随意的修改css来进行测试,这时你要小心了,你只要有修改,它就给自动保存了,显然这不是你想要的。

    吐槽:
    反馈一个页面体验问题:在留言编辑框里面按左右键时页面会自动跳转,修正下吧。

  11. zhang says:

    请问路由怎么设置呀 ?

  12. amibug says:

    我工程下文件编码是GBK的,chrome中修改后貌似变成UTF-8,导致我的注释全部变成乱码了,请问有解决办法么?

  13. 多梦 says:

    一直都是用Chrome调试,才知道Chrome修改后也是能保存的….

  14. 小憨包 says:

    本人是菜鸟 我一直试都实现不了 求高手指教一下

  15. Mappings里
    左边填写页面请求的资源的目录,右边填写本地文件目录对吧?
    我分别这样填写的:
    mapping url:C:/Users/ablesky/Desktop/sass-train
    mapping path:D:\sourse-workspace\newsave
    为什么无效啊!?回来一看是默认的就是什么都没填写,不起作用?

  16. 按教程试了下,没成功,在dev tools调试后本地文件没有跟着变,不知道哪里错了:
    我是在D盘一个文件夹中添加了.allow-devtools-edit文件,然后把这个目录添加到workspace,随后在这个目录下新建了test.html,test.css,和test.js,然后打开test.html,在dev tools中修改css样式,但本地文件没变.
    你文中说,如果css或js链接的是url则需要映射一下,我这个css和js就是本地的,这个映射还用不用做,如果用做,怎么做?
    期待回复,多谢~~

  17. zzhang says:

    嗨,当我在source目录下更改文件后ctrl+s可立即保存,同时本地文件更新。但是不在source下更改时,例如开发工具调试时,ctrl+s是保存当前网页啊!即使改了,但本地没有更新啊。是怎么回事?

  18. 果真厉害 says:

    一直想找这样的插件了,今天看了开发者工具竟然发现有这个选项,以后写CSS的利器了。

  19. Chrome 30 的设置有不同,可以参考http://www.sitepoint.com/whats-new-chrome-30/

    1 .Open the Developer Tools and click the setting cog in the bottom right corner.
    2.Click Workspace followed by Add folder.
    3.Browse to a folder where source files are located, hit Select and Allow when prompted.
    4.Set one or more server URLs and folder paths which map to that location. (Alternatively, navigate to a page, open the sources panel, right-click a file and select Map to a Network Resource.)

  20. 这个评论模块真心不好用,换个多说什么的吧

  21. 在Chrome 30里面的设置,有图有真相
    http://fatsheepcn.com/chrome-workspace/

  22. 令昔 says:

    求chrome利用adb插件远程调试的文章 。。。。

  23. 健身狂 says:

    谷歌 Experiments中没有File system folders in Sources Panel这一项

  24. Sandie says:

    第二步,experiments没有File system folders in Sources Panel是因为什么?因为版本不对么?
    另外,我在没有开启Developer Tools Experiments (开发者工具实验)之前,就已经有workspace了。但是修改不生效。

  25. MegaSu says:

    楼主试一下Sourcemap,可以编辑在Workspace里面编辑Less。

  26. digua says:

    表示真心好用的功能……自己居然不会用o(╯□╰)o

  27. 地瓜 says:

    表示这么好用的功能……自己居然不会用o(╯□╰)o