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开发之WebView

    做iOS的应用也有一段时间了,在之前的demo中一直没有机会用到WebView,今天就查缺补漏一下,使用一下WebView.最早接触WebView是在Android中接触的,iOS中的WebView的 ...

  2. 教你如何塑造JavaScript牛逼形象

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...

  3. 分享一段数据库中表数据更新SQL

    应用场景 我们在应用程序开发的时候,经常会遇到这样的一种情况:附属表更新了,主表的数据没有更新,这个关联表不只是外键的关联(通过附属表 ID 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...

  4. 小菜学习编程-Winform系列(初学者)

    前言 记得上次写<小菜的程序员道路(二)>,这篇文章的时候说过,要把工作以来整理的编程知识分享给大家,因为这半年来的工作实在是忙,现在也在忙着公司产品上线,但是答应的一定要实现,大家看我上 ...

  5. [c++] Exceptions

    注意优先级关系,如下: try { throw logic_error{"blah"}; } catch (exception) { // caught here! // 有点if ...

  6. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

  7. 浅析.NET的反射特性

    在.net框架体系内,反射特性较多的应用到.反射的相关定义分为两种. 自然解释:射是一种自然现象,表现为受刺激物对刺激物的逆反应:这是反射的字面解释,我们看一下计算机编程中的反射: 编程解释:通过 S ...

  8. Nodejs之MEAN栈开发(四)---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  9. SQL Server 通过重建方式还原 master 数据库

    1,备份master数据库 2,停止服务,直接删除master数据文件 3,用安装程序重建master数据文件 控制台下进入安装目录就不说了 D:\SetUp\sqlserver2012>Set ...

  10. 微信公众账号 token 验证失败 解决办法

    问题:微信公众账号 开发过程中配置  token 提示 验证失败 如下图: 点击修改配置: 填写相关url与token(自定义):点击提交,会出现 出现这种情况,主要是对相关参数不熟悉,要了解url与 ...