compass利用koala在chrome开启scss调试
compass不生成maps文件,所载调试css上,极不方便。看到下图的调试方式,怎么做。

利用用koala来解决,具体步骤如下:
1.确保自己安装了ruby和sass,compass。接着安装 compass-sourcemaps
gem install compass-sourcemaps --pre
2.安装koala,安装完成打开设置

3.在config.rb文件添加下列一段代码
# enable sourcemaps
enable_sourcemaps = true
sass_options = {:sourcemap => true}
4.开启chrome的开发者工具(F12)-> settings -> preference(首选项意思)

ps: koala 是一种前端能转义的工具,当然现在都在使用webpack,gulp,grunt等其他打包软件,但是这些打包软件,都需要写配置,明明就是简单活动页面,另外你也不想再自己的编辑器上装各种sass转css插件,所以koala提供很大方便。
compass利用koala在chrome开启scss调试的更多相关文章
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- Chrome控制台 JS调试
Chrome控制台 JS调试的一些小技巧 $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择 ...
- Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
- Chrome浏览器如何调试移动端网页信息
Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...
- chrome inspect 远程调试H5
chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...
- 使用Chrome DevTools直接调试Node.js与JavaScript(并行)
Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新 ...
- Chrome安卓H5调试,连接手机检测不到页面
Chrome安卓H5调试,连接手机检测不到页面,重启什么的都不行,未找到设备,或者offline,怎么办? 首先手机开启调试模式是必须的 然后用adb工具箱,cmd进来 运行命令 adb kill-s ...
- 利用Jemalloc进行内存泄漏的调试
内存不符预期的不断上涨,可能的原因是内存泄漏,例如new出来的对象未进行delete就重新进行复制,使得之前分配的内存块被悬空,应用程序没办法访问到那部分内存,并且也没有办法释放:在C++中,STL容 ...
随机推荐
- STL——heap结构及算法
heap(隐式表述,implicit representation) 1. heap概述 : vector + heap算法 heap并不归属于STL容器组件,它是个幕后英雄,扮演priority q ...
- MVC的简单分页【转】
传值的方式是通过querystring. 本例子是把整需要的数据查出来再分页的,因为当时做的时候数据很少,只有几十条. 如果数据多的话,可以在存储过程里分页,只是要传页码和记录的条数过来. 控制器: ...
- 用js写留言信息的判断非空条件
首先在tp上有多种方法去判断留言是否为空,但是js是最方便也是最没有冲突的. <form action="{:U('validate')}" method="pos ...
- WP8.1学习系列(第十九章)——事件和路由事件概述
我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概 ...
- shell 获取脚本的绝对路径
basepath=$(cd `dirname $0`; pwd) 在此解释下basepath : dirname $0,取得当前执行的脚本文件的父目录 cd `dirname $0`,进入这个目录(切 ...
- C#设计模式--装饰器模式
0.C#设计模式-简单工厂模式 1.C#设计模式--工厂方法模式 2.C#设计模式--抽象工厂模式 3.C#设计模式--单例模式 4.C#设计模式--建造者模式 5.C#设计模式--原型模式 6.C# ...
- Firefox --- 火狐浏览器下载
http://www.firefox.com.cn/download/
- javah 错误: 无法访问android.app.Activity问题解决
cd /Users/musictom/Documents/source/ky/app/build/intermediates/classes/debug javah -jni -classpath / ...
- 【咸鱼教程】一个简单的弹出二级菜单UIPopupMenu
一. 实际效果 演示地址 二.实现原理主要用Button+List组件,和遮罩实现. 1. 点击Button时,将List下移展开.2. 再次点击Button,或者选中List中的某一项时,将List ...
- 23种设计模式之适配器模式(Adapter)
适配器模式将一个接口转换成客户希望的另一个接口,从而使接口不兼容的那些类可以一起工作.适配器模式既可以作为类结构型模式,也可以作为对象结构型模式.在类适配器模式中,通过使用一个具体类将适配者适配到目标 ...