Workspace是个什么样的东西呢？他可以在开发人员工具中调试改动js或者css同一时候自己主动保存文件。可以避免开发人员在工具中调试好，再到编辑器中改动一次代码的反复操作，可以提高一定的效率

配置Chrome Workspace功能

Chrome Workspace功能是将在Chrome开发人员工具（F12）中对文档的改动直接应用于相应文件里。

因为Chrome并不知道当然文档相应用的文件为哪个，所以须要配置Workspace的映射关系来告诉Chrome对哪个文件做改动



使用Workspace条件：

  • Chrome V31+(正式版)
  • 本地server开发

1.点击F12工具的设置button

2.点击左側的workspace

3.点击Add folder

4.选择server所在的根文件夹，之后确定会chrome会在上面做出一个提示，点击同意5.

双击下图所看到的的地方，配置映射关系

6.填写映射关系，视详细情况填写，注意右边的/一定要填写（关键性步骤）

然后点击空白处。完毕填写

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

注意Workspace仅仅对外部引入的CSS样式有效！

參考：

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

开发人员调试工具Chrome Workspace的更多相关文章

  1. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  2. 开发者调试工具Chrome Workspace

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

  3. 不仅仅是浏览器 走近Chrome开发人员工具

    Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...

  4. 前端开发必备调试工具（Chrome的F12自带的功能和firebug插件差不多）

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  5. Chrome - 怎样独立窗口打开开发人员工具

    打开开发人员工具, 右上角找到下图红圈的键, 长按左键直到出现绿圈的键, 别松开鼠标, 把指针移到绿圈的键上面, 松开左键, 好了, 一个独立窗口粗线了. 转载请声明出处: http://www.cn ...

  6. Web 开发人员必备的12款 Chrome 扩展程序

    之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...

  7. EXT.NET高效开发（三）——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...

  8. 开发人员福利！ChromeSnifferPlus 插件正式登陆 Chrome Web Store

    今天(2014-10-30)下午,ChromeSnifferPlus 插件正式登陆 Chrome Web Store. 在线安装地址: https://chrome.google.com/websto ...

  9. 常用JS调试工具使用方法，帮你快速定位问题（Firebug+ IE“开发人员工具”）

    来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可 ...

随机推荐

  1. vue 模板下只能有一个跟节点 根节点一定要是个div

    <template> <div>简单说就是里面只能有一个跟的div button1.vue <template> <div> <Button> ...

  2. ssd训练自己的数据集

    1.在ssd/caffe/data下创建VOC2007的目录,将ssd/caffe/data/VOC0712里的create_data.sh.create_list.sh和labelmap_voc.p ...

  3. 获取汉字的拼音首字母--pinyin

    var pinyin = (function (){ var Pinyin = function (ops){ this.initialize(ops); }, options = { checkPo ...

  4. C#readonly 关键字与 const 关键字的区别

    1. const 字段只能在该字段的声明中初始化,readonly 字段可以在声明或构造函数中初始化.因此,根据所使用的构造函数,readonly 字段可能具有不同的值. 2. const 字段是编译 ...

  5. eclipse 的开发环境配置

    一.基础环境设置 1.jdk下载配置 2.JRE下载配置 3.Eclipse下载 4.Eclipde 与JRE配置,见图 二.PHP环境设置 1.apache + PHP 配置. 详见随笔文章:Ecl ...

  6. super(Student,self).__init__()初始化的是什么东西？

    继承不是为了继承里面原来的属性和值么,不初始化的话,会有什么问题? 2015-04-04源自:python进阶 5-17642 浏览2 回答 最佳回答 2015-05-05 1 super(Stude ...

  7. 2017 计蒜之道 初赛 第一场 A 阿里的新游戏

    题链:https://nanti.jisuanke.com/t/15499 这题观察图纸可知成三线段上的相邻点之间的距离有1,2,3三种情况的,同时要成线段必然是同横坐标或者纵坐标,然后我们排除掉穿过 ...

  8. Java面向对象学习-----类的成员变量2

    请定义一个交通工具(Vehicle)的类,其中有: 属性:速度(speed),体积(size)等等 方法:移动(move()),设置速度(setSpeed(int speed)),加速speedUp( ...

  9. xtu summer individual 5 E - Burning Bridges

    Burning Bridges Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  10. pdf & watermark & puppeteer

    pdf & watermark & puppeteer background image https://en.wikipedia.org/wiki/Watermark pdf &am ...