较新版本的sass(3.3+)支持source-map功能,可以配合谷歌浏览器或者livestyle来映射查找对应的样式。

要生成source-map可以在grunt中使用 grunt-contrib-sass 插件,只要不在options中配置 ourcemap:'none' 便默认在编译sass时自动生成匹配的.map文件:

下面是说说如何在谷歌中开启映射sass文件的功能,也当作给自己写一个备忘。

首先是在地址栏输入 chrome://flags  进入实验功能配置页面,我们找到 “启用开发者工具实验” 并点击 “启用” 链接:

然后重启Chrome。打开开发者工具(ctrl+shit+I),点击该栏右上方的齿轮图标(setting按钮):

在Genneral选项卡上,确保勾选上了“Enable CSS source maps”即可:

稍旧一点的Chrome可能还需要到Experiments选项卡中勾选上“Support for Sass”,但新版的谷歌浏览器已经取消了这一项。

之后试试再用Chrome开发者工具检测元素CSS样式时,会发现它已经能顺利帮你映射到对应的sass文件上了(即使你的css文件是压缩的):

完工~共勉~

用chrome来映射查找样式对应的sass的更多相关文章

  1. chromedriver与chrome版本映射列表

    chromedriver与chrome版本映射列表: chromedriver版本 支持的Chrome版本 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v ...

  2. Python3 ChromeDriver与Chrome版本映射表(更新至v2.43)

    Python3 ChromeDriver与Chrome版本映射表(更新至v2.43) ChromeDriver下载链接:http://chromedriver.storage.googleapis.c ...

  3. Chrome中输入框默认样式移除

    Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下:   这在我们未给输 ...

  4. 爬虫--selenium之 chromedriver与chrome版本映射表(最新至v2.46版本chromedriver)

    本文主要整理了selenium的chromedriver与chrome版本映射表,并且持续更新中..... 1.selenium之 chromedriver与chrome版本映射表(最新至v2.46版 ...

  5. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  6. 修改chrome浏览器默认css样式的方法

    最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...

  7. 在ie和chrome浏览器中滚动条样式的设置

    1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭 ...

  8. selenium-----chromedriver与chrome版本映射

    chromedriver下载地址:http://chromedriver.storage.googleapis.com/index.html chromedriver版本 支持的Chrome版本 v2 ...

  9. chrome的input默认样式黄色背景以及选中加粗的边框处理

    问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框 解决方案: 去掉黄色背景,给input添加au ...

随机推荐

  1. Java面试连环炮问题收集记录贴【JVM方面】

    写这类文章是为了记录下网上看到的/自己经历的一些一环扣一环的面试问题,一方面提高自己的理论知识,另外一方面也给自己去参加面试或面试他人提供点参考和帮助. 问题一: 为什么一个对象会被GC? 对象在进行 ...

  2. Knockout.js随手记(6)

    实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...

  3. KeyedPriorityQueue

    // <copyright file="KeyedPriorityQueue.cs" company="Microsoft">Copyright ( ...

  4. mysql 字符串 日期互转

    一.字符串转日期 下面将讲述如何在MySQL中把一个字符串转换成日期: 背景:rq字段信息为:20100901 1.无需转换的: SELECT * FROM tairlist_day WHERE rq ...

  5. mac版Camtasia 2.10破解

    Camtasia是非常好用的一款录屏.视频编辑.制作的软件.但是这么一款优秀的软件只有30天的试用期,试用期过后便不能使用. 目前网上的破解办法几乎都属于同一种办法: http://www.orsoo ...

  6. Mesos高可用解决方案剖析

    本文作者王勇桥,80后的IT攻城狮,供职于IBM多年,Mesos和Swarm社区的贡献者.本文是他根据自己对Mesos的高可用(High-Availability)设计方案的了解以及在Mesos社区贡 ...

  7. python学习5 常用三方模块

    watchdog: 监控指定目录/文件的变化并自定义处理事件 例子

  8. Day 1 T1

    题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...

  9. Theano 学习笔记(一)

    Theano 学习笔记(一) theano 为什么要定义共享变量? 定义共享变量的原因在于GPU的使用,如果不定义共享的话,那么当GPU调用这些变量时,遇到一次就要调用一次,这样就会花费大量时间在数据 ...

  10. [RT][NOIP2015]联合权值

    1.题面 2.总结 第一次回忆一下当年的题目.但是这道题已经做烂了,只是看还记得树遍历会写么. 然后我写了一下,有点费劲,交上去之后只有70,比较尴尬,看了下去年5月写的代码,发现完全不是一个感觉啊. ...