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. 最小生成树模板【kruskal & prim】

    CDOJ 1966 Kruskal 解法 时间复杂度O(mlogm) m为边数,这里主要是边排序占时间,后面并查集还好 #include <cstdio> #include <cst ...

  2. [bzoj3522][bzoj4543][POI2014]HOTEL

    题解: 比较难的一道题目 首先考虑暴力dp 我们会发现构成这种形状只有三种情况 1.三个点的lca相同 2.两个点lca相同,第三个点是lca的祖先 3.两个点lca相同,第三个点是lca祖先的子树中 ...

  3. One point compactification

    Theorem (One point compactification) Any locally compact space \(X\) can be embedded in another comp ...

  4. jmeter访问mysql数据库

    jdbc:mysql://localhost:3306/jy?allowMultiQueries=true 如果想同时执行多条语句

  5. 普林斯顿微积分读本 大纲与重点 (by zzd)

    普林斯顿微积分读本 大纲重点 由于博客园太菜,所以我用图片上传. 当前更新状态:未完待续,挖坑暂时不填了. UPD(2018-07-08): 稍微更一下,加一个本书的某一版本下载链接:https:// ...

  6. Python图表数据可视化Seaborn:3. 线性关系数据| 时间线图表| 热图

    1. 线性关系数据可视化 lmplot( ) import numpy as np import pandas as pd import matplotlib.pyplot as plt import ...

  7. Noj - 在线强化训练4

    状态 题号 竞赛题号 标题 × 1092 A 童年的回忆——计算24 × 1145 B 求图像的周长 × 1144 C 农场灌溉问题 × 1202 D 数独游戏 × 1243 E 循环赛日程表 × 1 ...

  8. HDU 1175 连连看 (DFS+剪枝)

    <题目链接> 题目大意:在一个棋盘上给定一个起点和终点,判断这两点是否能通过连线连起来,规定这个连线不能穿过其它的棋子,并且连线转弯不能超过2次. 解题分析:就是DFS从起点开始搜索,只不 ...

  9. Django分页(一)

    Django分页(一) 手动实现简单分页 HTML <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. Git rebase命令实战

    一.前言 一句话,git rebase 可以帮助项目中的提交历史干净整洁!!! 二.避免合并出现分叉现象 git merge操作 1.新建一个 develop 分支   2.在develop分支上新建 ...