SASS学习:Sass调试

王叨叨 | 2014-06-27 | 分类 笔记  | 标签 sass 

Chrome浏览器调试

F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在general选项中勾选Enable CSS source mapAuto-reload generated CSS

Chrome浏览器调试

Chrome浏览器调试

开启--sourcemap编译,f12打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件。

Chrome浏览器调试

点击scss文件,会跳到source里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择savesave as命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

Chrome浏览器调试


FireFox浏览器调试

debug-info调试:firefox可以安装插件FireSass使用debug-info来调试。开启--debug-info编译,f12打开firebug,就可以看到原先右边的css文件变成了我们现在的scss文件。

FireFox浏览器调试

sourcemap调试:firefox 29 将会开始支持sourcemap,注意是火狐自带的调试功能,而不是firebug。开启--sourcemap编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。

FireFox浏览器调试

点击scss文件,这样就跳到了scss文件。如下图:

FireFox浏览器调试

然后就可以进行我们的修改了,修改之后点击保存或者ctrl+s弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。

FireFox浏览器调试

如果觉得此篇文章对您有帮助,希望可以请我喝雪碧!请我喝雪碧

上一篇   下一篇   返回顶部