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. iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流

    在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...

  2. geotrellis使用(十九)spray-json框架介绍

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 spray-json简介 spray-json使用 ...

  3. swift中Range的使用书名

    在swift中Range有两种用法 1.把字符串转换成NSString来使用 //这里是把swift的字符换转换成了nsstring 使用 let str :NSString = text.strin ...

  4. 修正IE6不支持position:fixed的bug(转)

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...

  5. (七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们 ...

  6. CLR中的程序集加载

    CLR中的程序集加载 本次来讨论一下基于.net平台的CLR中的程序集加载的机制: [注:由于.net已经开源,可利用vs2015查看c#源码的具体实现] 在运行时,JIT编译器利用程序集的TypeR ...

  7. Net设计模式实例之简单工厂模式(Simple Factory Pattern)

    一.简单工厂模式简介(Bref Introduction) 简单工厂模式(Simple Factory Pattern)的优点是,工厂类中包含了必要的逻辑判断,根据客户端的选择条件动态实例化相关的类, ...

  8. 轻量级ORM

    不知道可能称的上是ORM,其实就是一个DBHelper.看到网上不少人写自己的ORM,但我觉得都不太好. 我这个ORM,学习成本非常低,常用的方法仅有几个,在使用的过程中,你不需要有太多要注意的地方, ...

  9. python编码规范

    python编码规范 文件及目录规范 文件保存为 utf-8 格式. 程序首行必须为编码声明:# -*- coding:utf-8 -*- 文件名全部小写. 代码风格 空格 设置用空格符替换TAB符. ...

  10. vim使用心得(持续更新)

    !统计符合条件的行数方法1 :g/<匹配条件>/d 查看影响行数,然后按u恢复.   !统计符合条件的行数方法2 :let numb=0 :g/<匹配条件>/let numb+ ...