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调试的更多相关文章

  1. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

  2. Chrome控制台 JS调试

    Chrome控制台 JS调试的一些小技巧 $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择 ...

  3. Chrome浏览器及调试教程

    ==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...

  4. 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  5. Chrome浏览器如何调试移动端网页信息

    Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...

  6. chrome inspect 远程调试H5

    chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...

  7. 使用Chrome DevTools直接调试Node.js与JavaScript(并行)

    Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新 ...

  8. Chrome安卓H5调试,连接手机检测不到页面

    Chrome安卓H5调试,连接手机检测不到页面,重启什么的都不行,未找到设备,或者offline,怎么办? 首先手机开启调试模式是必须的 然后用adb工具箱,cmd进来 运行命令 adb kill-s ...

  9. 利用Jemalloc进行内存泄漏的调试

    内存不符预期的不断上涨,可能的原因是内存泄漏,例如new出来的对象未进行delete就重新进行复制,使得之前分配的内存块被悬空,应用程序没办法访问到那部分内存,并且也没有办法释放:在C++中,STL容 ...

随机推荐

  1. ASP.NET MVC4优化

    删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎,如Razor,那么,我们就可以移除掉没有使用的视图引擎,提 ...

  2. [C] include <filename> 和 include "filename" 的区别

    在 C 语言中包含语句 #include <filename> 和 #include "filename" 的区别在于编译器的偏好,一般来说,使用双引号表示优先搜索当前 ...

  3. c语言学习笔记---符号

    专题2.符号的技巧: 1) 注释符与转义符 vC语言中的接续符(\)是指示编译器行为的利器: 接续符的使用:编译器会将反斜杠剔除,嗯在反斜杠后面的字符自动解到前面的一行. 在接续单词时,反斜杠之后不能 ...

  4. vue的首页渲染了两次的原因以及解决方法

    现在在用vue做一些单页面应用的东西,遇到了些许问题啊,比如我再渲染首页的时候,会渲染两次,查看了一下原因,原来是在写路由的时候写的格式错了: 这样的时候,初始的时候就是加载的exam_list页面, ...

  5. setcursor 与 showcursor

    Windows为鼠标光标保存了一个「显示计数」.如果安装了鼠标,显示计数会被初始化为0:否则,显示计数会被初始化为-1. 只有在显示计数非负时才显示鼠标光标.要增加显示计数,呼叫:ShowCursor ...

  6. 简述项目中优化sql的方法,从哪些方面,sql语句性能如何分析?

    查询速度慢的原因很多,常见如下几种 : .没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) .I/O吞吐量小,形成了瓶颈效应. .没有创建计算列导致查询不优化. .内存不足 .网络 ...

  7. 《转载》脚本实现从客户端服务端HTTP请求快速分析

    本文转载自https://www.imooc.com/article/14107 首先我想介绍下,分享这个脚本的用处: 当客户告知我们,一个页面http://www.xxx.com 有问题时,作为PE ...

  8. 安装windows7/8/10到U盘或移动硬盘

    https://jingyan.baidu.com/article/e52e36156f6ad240c60c518c.html jpg改rar

  9. JS-缓冲运动基础结构

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. requests源码分析

    0.前言 (1) 拆部分reques中感兴趣t的轮子 (2)对一些感兴趣的pythonic写法做一些归纳 1.用object.__setattr__来初始化构造函数 反正我之前就是直接实例对象时把所有 ...