开发者调试工具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
Workspace是个什么样的东西呢?他可以在开发人员工具中调试改动js或者css同一时候自己主动保存文件.可以避免开发人员在工具中调试好,再到编辑器中改动一次代码的反复操作,可以提高一定的效率 配置 ...
- 配置Chrome Workspace功能
配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中.由于Chrome并不知道当然文档对应用的文件为哪 ...
- Chrome的开发者工具(Chrome Developer Tools)
Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...
- 【XPath Helper:chrome爬虫网页解析工具 Chrome插件】XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网
[XPath Helper:chrome爬虫网页解析工具 Chrome插件]XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插 ...
- 浏览器开发者工具Chrome Developer Tool
开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles 一直被墙 ...
- Chrome开发者调试工具
参考资料 Chrome Console不完全指南 Chrome使用技巧 Chrome开发工具详解 结束语 工欲善其事,必先利其器.
- 通过 Chrome Workspace 调试本地项目(修改样式时及时保存)
打开 DevTools 开发者工具[F12]中的 Sources 面板,在面板左侧右键选择「Add folder to workspace」,选择添加的文件夹. 添加好后,右键一个文件,选择「Map ...
- chrome浏览器直接编辑源码功能的开通办法 - Chrome Workspace
因为我看到网上有些文章的教程已经过时,特更新,此文章的步骤适用于chrome 或 chromium 30或31. 开启”开发者工具实验”(这翻译真心烂…): 在browser输入chrome://fl ...
- 浏览器F12(开发者调试工具) 功能介绍
调试时使用最多的功能页面是:元素(ELements).控制台(Console).源代码(Sources).网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS ...
随机推荐
- MyCAT报java.lang.OutOfMemoryError: Java heap space
早上同事反映,mycat又假死了,估计还是内存溢出,查看了一下错误日志. INFO | jvm | // :: | java.lang.OutOfMemoryError: Java heap spac ...
- 对来自于Azure的远程连接文件(.rdp)的另一种更便捷的自定义方法
在上一篇日志中(很抱歉那张比较黑的截图)介绍了如何获得Azure中的Windows虚拟机的远程连接文件,以及一种基于文本编辑方式进行自定义的方法. 实际上对于在Windows下的用户来说,我们可以使用 ...
- Linux使用lvresize扩展或缩减lv大小
环境:CentOS 6.7 一.新建并挂载目录 /u01 和 /data 1.创建目录挂节点/u01,/data mkdir -p /{u01,data} 2.创建lv,名称是lv_u01,大小10g ...
- SFC中的故障管理
1.SFC中包的格式 网络服务包头,当Obit被设置为1时,表示一个SFC OAM消息 OAM Type:SFC OAM的类型(1.连接认证,2.持续性检验,3.路由跟踪,4.性能度量) SFC OA ...
- reactjs学习之路
正式开始react的学习 1.react中组件的首字母如果是大写就会当成自定义组件,如果是小写就会当成DOM的自带元素名.如果你自定义组件名称首字母是小写不会报错,但是无法显示. 2.自定义组件的re ...
- 从零开始学 Java - 我放弃了 .NET ?
这不是一篇引起战争的文章 毫无疑问,我之前是一名在微软温暖怀抱下干了近三年的 .NET 开发者,为什么要牛(sha)X一样去搞 Java 呢?因为我喜欢 iOS 阿!哈哈,开个玩笑.其实,开始学 Ja ...
- ASP.NET WEB API必知必会:特性路由
一.什么是特性路由? 特性路由是指将RouteAttribute或自定义继承自RouteAttribute的特性类标记在控制器或ACTION上,同时指定路由Url字符串,从而实现路由映射,相比之前的通 ...
- NSPredicate 的使用
NSPredicate是什么? NSPredicate 是预测的意思 但是我们常翻译成谓词 它可以干什么? 使用NSPredicate可以定义模糊查询条件 根据一定的条件 我们就可以从一个数组中快速找 ...
- MacOS使用AMPPS环境
下载(http://www.ampps.com/download)并安装AMPPS 基本配置:2.1选中所有扩展2.2 变更PHP版本为5.3 配置虚拟主机(Virtual Hosts) AMPP ...
- iOS通过ARC管理内存(内容根据iOS编程编写)
栈 当程序执行某个方法(或函数)时,会从内存中一个叫栈的区域分配一块内存空间,这块内存空间我们叫帧.帧负责保护程序在方法内声明的变量的值.在方法内声明的变量我们称之为局部变量. 当我们的程序开始启动, ...