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. 学习笔记: 反射应用、原理,完成扩展,emit动态代码

    using Ruanmou.DB.Interface; using Ruanmou.DB.MySql; using Ruanmou.DB.SqlServer; using Ruanmou.Model; ...

  2. es6 Map,Set 和 WeakMap,WeakSet

    这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的.同时,在进行属性值添加与获取时有专门的get,set ...

  3. gitlab之四: gitlab ssh key 配置

    参考:  https://www.cnblogs.com/hafiz/p/8146324.html 1.  gitlab的右上角.  用户下拉菜单--->setting>ssh密钥,将公钥 ...

  4. Codeforces 802I Fake News (hard) (SA+单调栈) 或 SAM

    原文链接http://www.cnblogs.com/zhouzhendong/p/9026184.html 题目传送门 - Codeforces 802I 题意 求一个串中,所有本质不同子串的出现次 ...

  5. .net面试问答

    转载自:https://www.cnblogs.com/dingfangbo/p/5768991.html .net面试问答(大汇总)   原文://http://blog.csdn.net/weny ...

  6. 用sql的avg(score)求完平均值后,保存两位小数的方法(用于查询或视图)

    查jx_score表的平均值,以哪次考试(testid)和科目分组(courseid) select testid, courseid, round(avg(`jx_score`.`score`),2 ...

  7. POJ 2531-Network Saboteur(dfs)

    题目链接:https://vjudge.net/problem/POJ-2531 最大流-最小割问题: https://wenku.baidu.com/view/54323c030722192e453 ...

  8. Python NLTK 自然语言处理入门与例程(转)

    转 https://blog.csdn.net/hzp666/article/details/79373720     Python NLTK 自然语言处理入门与例程 在这篇文章中,我们将基于 Pyt ...

  9. win10下正确使用Sublime Text搭建python调试环境

      pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的. 使用IDE无非是图个方便省事,特别是像我这种有些记性差的来说. IDE说起来方便于的几个地方就是: 1.语法颜色高亮 ...

  10. C# LnkHelper

    using System; using System.Collections.Generic; using System.Text; using Microsoft.Win32; using Syst ...