用chrome来映射查找样式对应的sass
较新版本的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的更多相关文章
- chromedriver与chrome版本映射列表
chromedriver与chrome版本映射列表: chromedriver版本 支持的Chrome版本 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v ...
- Python3 ChromeDriver与Chrome版本映射表(更新至v2.43)
Python3 ChromeDriver与Chrome版本映射表(更新至v2.43) ChromeDriver下载链接:http://chromedriver.storage.googleapis.c ...
- Chrome中输入框默认样式移除
Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下: 这在我们未给输 ...
- 爬虫--selenium之 chromedriver与chrome版本映射表(最新至v2.46版本chromedriver)
本文主要整理了selenium的chromedriver与chrome版本映射表,并且持续更新中..... 1.selenium之 chromedriver与chrome版本映射表(最新至v2.46版 ...
- chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
- 修改chrome浏览器默认css样式的方法
最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...
- 在ie和chrome浏览器中滚动条样式的设置
1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭 ...
- selenium-----chromedriver与chrome版本映射
chromedriver下载地址:http://chromedriver.storage.googleapis.com/index.html chromedriver版本 支持的Chrome版本 v2 ...
- chrome的input默认样式黄色背景以及选中加粗的边框处理
问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框 解决方案: 去掉黄色背景,给input添加au ...
随机推荐
- CozyRSS开发记录16-RssContentView显示
CozyRSS开发记录16-RssContentView显示 1.RssContentView的布局和绑定 继续参照原型图来写xaml: 然后在RSSContentFrameViewModel里提供绑 ...
- Dev Cpp 输出中文字符问题
最近 c++ 上机作业,vc++6.0 挂了没法用,只好用 Dev Cpp 先顶替一下,然而在遇到输出中文字符的时候出现了乱码的情况,但这种情况又非常诡异.于是简单了解了一下写成此博客. [写在前面] ...
- 移动端js知识总结
1.如果使用jquery绑定touch事件的话,获取touchstart,touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX, 获取touch ...
- APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法
用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...
- D3数据绑定
这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...
- hellocharts折线图与柱状图的上下结合酷炫效果(学习笔记)
二话不说先贴图 贴代码: LineColumnDependencyActivity.java package com.shaoxin.mylinecolumndependencyactivity; i ...
- 矩阵快速幂 HDU 4565 So Easy!(简单?才怪!)
题目链接 题意: 思路: 直接拿别人的图,自己写太麻烦了~ 然后就可以用矩阵快速幂套模板求递推式啦~ 另外: 这题想不到或者不会矩阵快速幂,根本没法做,还是2013年长沙邀请赛水题,也是2008年Go ...
- Theano 学习笔记(一)
Theano 学习笔记(一) theano 为什么要定义共享变量? 定义共享变量的原因在于GPU的使用,如果不定义共享的话,那么当GPU调用这些变量时,遇到一次就要调用一次,这样就会花费大量时间在数据 ...
- 跨界玩AR,迪奥、Hugo Boss等知名奢侈品牌将制造AR眼镜
Snapchat因为阅后即焚消息应用而被人所熟知,前段时间这家公司拓展主要业务,未来将不再只有消息应用,还有款名为"Spectacles"的AR太阳镜.内置了一个摄像头,戴上之后即 ...
- bfrd collector性能排查
1.2.09上昨天timeout在18点23分-22点10分 2.检测2.17网卡流量,sar -f /var/log/sa/sa06 -n DEV,发现这段时间刚好是rxpck/s超过6400. ...