在前端开发中，我们经常需要在浏览器中进行调试，特别是一些样式的修改，如果你还是先在浏览器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. 杂谈：Windows操作系统的介绍与对Win8操作系统市场反响冷淡原因的分析

    Windows操作系统,毫无疑问是操作系统市场上的霸主,也正因为Windows操作系统的诞生让电脑的操作性能变得更加平民化,深的用户的喜爱.至今身边的人也是选择windows操作系统的居多,这篇文章也 ...

  2. 26、redis中默认有多少个哈希槽？

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求余 ...

  3. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  4. 第3章:Hadoop分布式文件系统(1)

    当数据量增大到超出了单个物理计算机存储容量时,有必要把它分开存储在多个不同的计算机中.那些管理存储在多个网络互连的计算机中的文件系统被称为"分布式文件系统".由于这些计算机是基于网 ...

  5. java中变量使用的总结

    java中整数默认为int,小数默认为double. float n5=1.3; 这个句子就会报错,应该修改成这样float n5=1.3f; 八大基本类型 变量类型 位数 范围 备注 Byte 8位 ...

  6. XML反序列化出错，XML 文档(2, 2)中有错误

    XML转换为实体类的错误处理方案 一.错误描述: XML反序列化出错,XML 文档(2, 2)中有错误 二.解决方案: 在实体类的字段要加上XmlElement属性 三.具体实现: 1.XML文档 & ...

  7. MSSQL如何将查询结果拼接成字符串

    在博问上看到一个提问“MSSQL如何将查询结果拼接成字符串” ,想了一下应该怎么实现呢,在c#等语言下好实现,但在sql里实现.还真没做过. 目标:想要在SQL中将查询的结果拼接为 '1','2',' ...

  8. ExtJs 中Viewport的介绍与使用

    ExtJs 中Viewport的介绍与使用 VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例 ...

  9. [日常] Go语言圣经-基于select的多路复用习题

    练习 8.8: 使用select来改造8.3节中的echo服务器,为其增加超时,这样服务器可以在客户端10秒中没有任何喊话时自动断开连接. reverb3.go package main import ...

  10. Web前端基础——CSS

    一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...