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的更多相关文章

  1. 开发人员调试工具Chrome Workspace

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

  2. 配置Chrome Workspace功能

    配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中.由于Chrome并不知道当然文档对应用的文件为哪 ...

  3. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  4. 【XPath Helper:chrome爬虫网页解析工具 Chrome插件】XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网

    [XPath Helper:chrome爬虫网页解析工具 Chrome插件]XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插 ...

  5. 浏览器开发者工具Chrome Developer Tool

    开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles   一直被墙 ...

  6. Chrome开发者调试工具

    参考资料 Chrome Console不完全指南 Chrome使用技巧 Chrome开发工具详解 结束语 工欲善其事,必先利其器.

  7. 通过 Chrome Workspace 调试本地项目(修改样式时及时保存)

    打开 DevTools 开发者工具[F12]中的 Sources 面板,在面板左侧右键选择「Add folder to workspace」,选择添加的文件夹. 添加好后,右键一个文件,选择「Map ...

  8. chrome浏览器直接编辑源码功能的开通办法 - Chrome Workspace

    因为我看到网上有些文章的教程已经过时,特更新,此文章的步骤适用于chrome 或 chromium 30或31. 开启”开发者工具实验”(这翻译真心烂…): 在browser输入chrome://fl ...

  9. 浏览器F12(开发者调试工具) 功能介绍

    调试时使用最多的功能页面是:元素(ELements).控制台(Console).源代码(Sources).网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS ...

随机推荐

  1. OracleDBA之用户管理

    再分享一下Oracle中对用户的管理,以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家分享一下,转载请注明出处,下面用的Oracle的版本是10g,用的时WinServer20 ...

  2. Google Chrome 应用商店上传扩展程序

    1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...

  3. 小菜学习设计模式(二)—单例(Singleton)模式

    前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...

  4. 1Z0-053 争议题目解析684

    1Z0-053 争议题目解析684 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 684.Your database is running in ARCHIVELOG mode. ...

  5. 相克军_Oracle体系_随堂笔记003-体系概述

    1.进程结构图 对Oracle生产库来讲,服务器进程(可以简单理解是前台进程)的数量远远大于后台进程.因为一个用户进程对应了一个服务器进程. 而且后台进程一般出问题几率不大,所以学习重点也是服务器进程 ...

  6. DocX在C#中的基本操作方法

    用了一个星期把园子里2016年中有关.net的文章都看了,有些只是大致的看了一下,在看的同时也在记录一些通用的方法.发现有很多对NPOI的文档,主要是操作Excl的方法,却很少有关文档类型的方法. 在 ...

  7. jQuery仿阿里云购买选择购买时间长度

    效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...

  8. 芒果TV招聘研发工程师(JAVA PYTHON),地点长沙

    长沙芒果TV招聘高级 JAVA Python 工程师,工作地点:湖南广电   有兴趣的邮件0xmalloc@gmail.com; zealotyin@qq.com 公司有一大批从北京上海一线互联网企业 ...

  9. Java代码优化(长期更新)

    前言 2016年3月修改,结合自己的工作和平时学习的体验重新谈一下为什么要进行代码优化.在修改之前,我的说法是这样的: 就像鲸鱼吃虾米一样,也许吃一个两个虾米对于鲸鱼来说作用不大,但是吃的虾米多了,鲸 ...

  10. HTML5中使用图片传递密文

    上面的两张图片中,你能看出有什么不同吗? 右图使用 html5 canvas api 中的 getImageData 和 putImageData 函数嵌入了一段文字. 道理很简单,getImageD ...