1.我们都知道chrome浏览器打开开发者工具的Sources 栏可以查看css文件,并且可以实时修改样式,查看效果,但是这里修改的内容并不会保存到源文件中。

2.   以下方法可以使在chrome浏览器中修改的样式同时更新到源文件中。

(1) 在Sources面板空白处右键,将项目文件添加到工作区中,选择项目文件路径——选择允许,如下图所示:

(2)添加后,面板中会出现一个项目文件夹,但是此时的项目文件与浏览器中打开的文件并没有关联起来。

(3)选择一个相应的文件,右键——Map to netWork resource 进行文件关联。

(4)关联后,面板中只剩下一个项目文件夹。

(5)此时再对css文件进行修改,在浏览器中其实是对源文件的修改,可以直接查看效果,是不是方便很多哈哈。

Chrome_调试CSS的更多相关文章

  1. 如何在普清的屏上调试CSS样式二倍图背景

    背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...

  2. SharePoint远程调试CSS

    1.在浏览器中找到需要调试的样式文件: 2.在SharePoint打开对应的文件,直接修改看到效果:

  3. 趣图:后端工程师是怎样调试CSS的

      一大波趣图:CSS的力量 趣图:前端 VS 后端

  4. Sublime + Chrome 本地调试 CSS 选择器

    生成简单的 HTML 代码 使用MacDown写 Markdown,快捷键ALT+CMD+C拷贝成 HTML 代码 粘贴到 Sublime 中,加上 body 标签和 css 头 html <h ...

  5. Chrome_调试js出现Uncaught SyntaxError: Unexpected identifier

    转载自:http://blog.csdn.net/yiluoak_47/article/details/7663952 chrome下运行编写的JavaScript代码时,在工具javascript控 ...

  6. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  7. 移动端页面(css)调试之“weinre大法”

    移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就 ...

  8. 小技巧 - CSS中:hover调试

    在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...

  9. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

随机推荐

  1. kickstart-F

    A题 Anagrams字符串是指两个字符串中都出现相同的字母且这些字母出现的次数相同. 小数据完全可以暴力,遍历A的子串,遍历B的子串,通过bool f(i,j,k,l)计算A[i,j], B[k,l ...

  2. python之PIL 二值图像处理和保存

    0. 1.参考 http://pszpcl.baike.com/article-77327.htmlwindows 图片右键:属性 详细信息 位深度位深度 用于指定图像中的每个像素可以使用的颜色信息数 ...

  3. Python题目练习(二)

    1.如何实现对python列表去重,并保持原来顺序 li = [1,2,5,3,1,6,3,8,0,3,2,4] l = [] for i in li: if i not in l: l.append ...

  4. echarts Y轴的刻度 跟数据对应---tooltip-formatter

    var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018- ...

  5. python---读取/写入excel用例数据

    使用excel管理用例 ①.读取excel的用例数据,每一类参数保存在list中返回:②.那么接下来使用unitest编写用例时,可以去调用这个函数.使用里面的数据: 个人认为好处是,大部分人还是习惯 ...

  6. 51Nod1766 树上的最远点对 ST表 LCA 线段树

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1766.html 题目传送门 - 51Nod1766 题意 n个点被n-1条边连接成了一颗树,给出a~ ...

  7. Python dictionary 字典 常用法

    Python dictionary 字典 常用法 d = {} d.has_key(key_in)       # if has the key of key_in d.keys()          ...

  8. poi设置打印页页脚和页数设置

    之前在网上搜了很久,也没有搜到具体页脚页数的答案,最后还是在官方api文档上找到了答案: HSSFPrintSetup printSetup = (HSSFPrintSetup) sheet.getP ...

  9. hdu 2091空心三角形

    把一个字符三角形掏空,就能节省材料成本,减轻重量,但关键是为了追求另一种视觉效果.在设计的过程中,需要给出各种花纹的材料和大小尺寸的三角形样板,通过电脑临时做出来,以便看看效果.  Input每行包含 ...

  10. 20165220 Java第三周学习总结

    1.教材学习内容总结 类与对象 类与对象的关系:要产生对象必须先定义类,类是对象的设计图,对象是类的实例 为个别对象的数据成员指定值的方式是:对象.对象成员 注意“一类一文件” 类在定义时要使用关键词 ...