码迷,mamicode.com
首页 > 其他好文 > 详细

开发者调试工具Chrome Workspace

时间:2015-03-17 20:20:57      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:前端调试   前端   chrome workspace   

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

配置Chrome Workspace功能

Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中。
由于Chrome并不知道当然文档对应用的文件为哪个,所以需要配置Workspace的映射关系来告诉Chrome对哪个文件做修改

使用Workspace条件:

  • Chrome V31+(正式版)
  • 本地服务器开发

1.点击F12工具的设置按钮

技术分享

2.点击左侧的workspace

技术分享

3.点击Add folder

技术分享


4.选择服务器所在的根目录,之后确定会chrome会在上面做出一个提示,点击允许技术分享5.

双击下图所示的地方,配置映射关系技术分享

6.填写映射关系,视具体情况填写,注意右边的/一定要填写(关键性步骤)技术分享

然后点击空白处,完成填写


7.然后回到一个页面中去,试着去更改一个样式数值,然后打开你的样式文件,验证是否生效技术分享技术分享

注意Workspace只对外部引入的CSS样式有效!


参考:

http://www.cnblogs.com/terrylin/p/3629751.html

开发者调试工具Chrome Workspace

标签:前端调试   前端   chrome workspace   

原文地址:http://blog.csdn.net/smy_yu/article/details/44345167

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!