使用 Chrome Workspace 进行网站调试

倡萌之前分享过《对站长和网页设计师非常有用的Chrome扩展》 ,今天转载 腾讯ISUX  的一篇文章,主要介绍如何使用 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选项。

chrome-workspace-cmhello_com

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

Windows: copy con .allow-devtools-edit 再 Ctrl + Z

0018-cmhello_com

Mac:touch .allow-devtools-edit

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

0019-cmhello_com

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

0020-cmhello_com

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

0021-cmhello_com

0022-cmhello_com

缺陷:无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑

总之Workspace还是能在调试阶段帮助我们提升效率

转载自:腾讯ISUX(http://isux.tencent.com/chrome-workspace.html),标题有改动

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2013/6/5作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

13 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. lighting lighting说道:
    10#

    用起来 赶脚还不太成熟,问题还不少,尝鲜或者辅助做点调试设计还是可以的,目前还不能真玩哈

  2. 游手好弦 游手好弦说道:
    9#

    这货很好用~

  3. Tokin Tokin说道:
    8#

    首页不知不觉又有变化。。。

  4. 麦芽糖和鱼 麦芽糖和鱼说道:
    7#

    :arrow: 就怕到时改了又改不不回去就麻烦了

  5. 50电影网 50电影网说道:
    6#

    用这个东西有用吗?

  6. 小草元 小草元说道:
    5#

    早些时候用了就用了,现在去用有点不习惯。。

  7. 软件小品 软件小品说道:
    4#

    Chrome Workspace 很牛的样子

    • 微历史 微历史说道:

      很多插件的确好用

  8. kitten0 kitten0说道:
    3#

    这个不怕改着改着弄乱套了啊

  9. 小蝴蝶 小蝴蝶说道:
    2#

    autosave的话就怕改毁了没的后悔..

    • 麦田一根葱 麦田一根葱说道:

      同意,不能恢复就完蛋了 :?:

    • Sigma Sigma说道:

      在sources里的某个文件内容上右键,有个local modifications,类似与一个版本控制软件。所以还是很有保障的,只要熟悉这些用法就行了。

  10. 冻猫 冻猫说道:
    1#

    这是个好东西啊。这下改样式方便多了

扫一扫,用手机访问本站

扫一扫,用手机访问本站