在前端开发中，我们经常需要在浏览器中进行调试，特别是一些样式的修改，如果你还是先在浏览器elements中调试好在复制到本地文件，那就真的out了。

chrome浏览器的workspace功能完全可以帮你实现同步修改，但需要一些设置。好了，废话不多说，先看下面的例子：

1、在chrome中打开本地html文件，F12，打开调试器

2、在右上角的选择菜单中选择setting

3、在左侧菜单栏中选择workspace，并点击add folder添加项目目录所在文件夹

4、点击add，添加mappings，注意路径与上面的黑体路径相符，后面需加一斜杠

5、设置好后，回到elements面板，尽情的调试你的样式吧！会有奇迹哦！

调试之前elements中样式

调试之前在编辑器中打开的本地样式文件

调试后

有了workspace，妈妈再也不用担心我来来回回的调试样式了

chrome中workspace配置达到同步修改本地文件的作用的更多相关文章

  1. chrome浏览器开发者工具之同步修改至本地

    相信好多小伙伴喜爱webpack的热加载技术,省时而又不繁琐,讨厌F5或者Ctrl+F5. 嘿嘿,现在介绍大家一个在浏览器中修改直接同步到本地代码修改的方法--- (程序员都是从0开始数数的!) 第0 ...

  2. outlook邮箱邮件与企业邮箱同步(outlook本地文件夹邮件，web邮箱里没有)

    用惯了outlook2010, 问题:今天将邮件放到自定义文件夹后,发现在web邮箱中看不到邮件了.不能同步到企业邮箱. 解决忙了一天,才知道是账户类型问题,pop3类型,只下载不上传.所以outlo ...

  3. C#中使用Log4net日志输出到本地文件、Textbox或Listview

    网上很多配置log4net的方法,但是排行靠前的 根本就没有说明清除,导致浪费了两个小时来搞清楚如何配置,真是无语,特写此文,给那些刚接触log4net的朋友 1.参考链接:http://blog.s ...

  4. vs中web配置可浏览json数据文件

    在日常的前端开发中,我们会制作一些数据文件,常用的有后缀名为json的文件,但是vs在启动项目时,是不能浏览json文件的,常见的错误提示如下图所示 解决这个错误,只需要在web.config文件中配 ...

  5. 配置虚拟域名，hosts文件起作用

    快速打开hosts方法 开始->运行->system32->回车 当前路径文件夹drivers\etc\hosts hosts文件起作用,目前楼主知道有两个可能原因 1.刷新dns ...

  6. 从SuperSocket的App.config中读取配置，并修改保存，再重启服务

    string XmlPath = System.Windows.Forms.Application.ExecutablePath + ".config"; XmlDocument ...

  7. 在chrome 怎么通过ajax请求加载本地文件

    在chrome下面用Jquery 的load方法加载本地的html文件时会报错 我百度了一下是因为 谷歌浏览器内核为了安全机制,不允许这样方式访问其他页面,但是可以通过加 --enable-file- ...

  8. chrome浏览器调试线上文件映射本地文件

    chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...

  9. 3、带你一步一步学习ASP.NET Core中的配置之Configuration

    如果你是刚接触ASP.NET Core的学习的话,你会注意到:在ASP.NET Core项目中,看不到.NET Fraemwork时代中的web.config文件和app.config文件了.那么你肯 ...

随机推荐

  1. SSDT Hook实现内核级的进程保护

    目录 SSDT Hook效果图 SSDT简介 SSDT结构 SSDT HOOK原理 Hook前准备 如何获得SSDT中函数的地址呢 SSDT Hook流程 SSDT Hook实现进程保护 Ring3与 ...

  2. python垃圾回收

    python垃圾回收 python垃圾回收主要使用引用计数来跟踪和回收垃圾.在引用计数的基础上,通过“标记—清除”解决容器对象可能产生的循环引用问题,通过“分代回收”以空间换时间的方法提高垃圾回收效率 ...

  3. 链表的反转、合并(不借助额外list数组)

    链表的基本操作:线性表 (单链表.循环链表-python实现) 反转链表: # -*- coding:utf-8 -*- class ListNode: def __init__(self, x): ...

  4. node.js的

    node.js入门 http://www.cnblogs.com/rubylouvre/archive/2010/07/15/1778403.html 专题:Node.js专区http://devel ...

  5. haproxy+keepalived原理特点

    所有的系统,都是先经历一个单台机器搞所有业务的时代,一个程序+一个mysql数据库,就可以满足开发及第一个版本上线的要求.随着,数据的增加以及业务的增长,这些应用就面临一个访问量的扩大以及扩展的问题. ...

  6. spring security xml配置详解

    security 3.x <?xml version="1.0" encoding="UTF-8"?> <beans:beans xmlns= ...

  7. Java中的构造器与垃圾回收

    构造器 在我们初始化对象时,如果希望设置一些默认值,那么就可以使用构造器,在Java中,构造器使用和类同名的名字且没有返回值,如下 class Test{ private String name; T ...

  8. MySQL中临时表的基本创建与使用教程（create temporary table ）

    当工作在非常大的表上时,你可能偶尔需要运行很多查询获得一个大量数据的小的子集,不是对整个表运行这些查询,而是让MySQL每次找出所需的少数记录,将记录选择到一个临时表可能更快些,然后在这些表运行查询. ...

  9. shell脚本案例分享 - 业务系统日志自定义保留或删除需求

    需求说明:  线上某些业务系统的日志不定期产生, 有的每天产生, 有的好几天才产生, 因为系统只有在用的时候才产生日志,日志文件均存放在以当天日期命名的目录下. 当日志目录越来越多时就需要处理, 由此 ...

  10. OAuth2.0的理解&基础

    此文章是复制黏贴网上文章的,主要做自己备用着看(也加了自己的一点见解),喜欢的读者也可以看. OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2 ...