开发人员调试工具Chrome Workspace
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的更多相关文章
- Web前端开发人员实用Chrome插件收集
越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...
- 开发者调试工具Chrome Workspace
Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率 配置Chrom ...
- 不仅仅是浏览器 走近Chrome开发人员工具
Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...
- 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)
前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...
- Chrome - 怎样独立窗口打开开发人员工具
打开开发人员工具, 右上角找到下图红圈的键, 长按左键直到出现绿圈的键, 别松开鼠标, 把指针移到绿圈的键上面, 松开左键, 好了, 一个独立窗口粗线了. 转载请声明出处: http://www.cn ...
- Web 开发人员必备的12款 Chrome 扩展程序
之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...
- EXT.NET高效开发(三)——使用Chrome浏览器的开发人员工具
这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...
- 开发人员福利!ChromeSnifferPlus 插件正式登陆 Chrome Web Store
今天(2014-10-30)下午,ChromeSnifferPlus 插件正式登陆 Chrome Web Store. 在线安装地址: https://chrome.google.com/websto ...
- 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)
来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可 ...
随机推荐
- windows测试物理网络
ping 192.168.10.88 -t ,参数-t是等待用户去中断测试
- C# 實現文件壓縮-- 背景:服務器Log.txt 過多,佔用過多硬盤空間,壓縮備份后節省空間資源
1.壓縮實現代碼如下: 調用ICSharpCode.SharpZipLib.dll(free software,可以搜到源碼). 轉移指定目錄文件夾轉移到目標文件夾 壓縮目標文件夾 刪除目標文件夾 u ...
- CAD绘制固定圆形标注(网页版)
js中实现代码说明: function DoFixCircleComment() { var ent = mxOcx.DrawCustomEntity("TestMxCustomEntity ...
- 01Hibernate
Hibernate Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自 ...
- Spring Boot . 3 -- Spring Boot Auto_configuration 是如何实现的?
配置是Spring 框架的重要核心之一,所以Spring 应用能够正常的跑起来肯定是需要配置的,但是使用的Spring Boot 后很多配置没有做,那么AUTO-CONFIGURATION 到底是怎么 ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- [模板] Treap
插入x 删除x 查询排名为x的数 查询x的排名 求x的前驱.后继 //Stay foolish,stay hungry,stay young,stay simple #include<iostr ...
- myBatis查询报错 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
myBatis查询报错 You have an error in your SQL syntax; check the manual that corresponds to your MySQL se ...
- 第二次:Ubuntu16.04 系统怎么截图
一开始想着写文章不用图,全靠文字描述,可是我错了,技术类文字没有图怎么能说的清楚,于是乎开始找在Ubuntu系统下的截图工具,网络神奇,发现了这个,以下命令可以反复试试: ubuntu 会自带一款截图 ...
- mac 解决mysql启动不了
mac升级了mysql,没有替换原来的链接的情况下, 启动mysql restart 会失败 解决方法,找到mysql真正的安装目录 mysql.server start