Chromer Developer Tools中的Sass/SCSS支持

Question

以前,直到最近的时间(据我所知,直到Chrome 27),Chrome开发工具在Chrome实验的帮助下,支持Sass(SCSS准确)"检查".

支持表现在检查站点的CSS文件的能力以及CSS是否使用--debug-infoSCSS(SCSS 3.2.7)从SCSS编译,然后在CSS面板中:

而不是CSS文件链接 - 您将看到相应的SCSS文件链接,您可以单击它,它将在确切的SCSS规则中的资源中打开文件,这有助于检查CSS规则(很像您可以使用CSS文件) .

无论出于何种原因,这已停止使用(我的)最新的Chrome更新.

这对我目前正在做的工作很重要(SCSS重组一个大型项目)所以我问:有没有人经历过同样的事情(我在所有可以访问的机器上都有这个),更重要的是,有人知道吗如何解决它(没有找到旧的Chrome版本)？

我不确定什么是合适的SE渠道,但因为它与开发有关 - 在这里它是

PS SCSS生成的路径似乎是正确的,因为在FireSASS中它们被正确显示和访问

我试过的任何频道都会发生同样的情况 - 发布,测试版,金丝雀

更新18.06.13

由于似乎旧的(--debug-info)日子已经过去,我将接受@electric_g回答作为唯一的可能性.

Answer 1

我在Chrome Canary上遇到了同样的问题,我通过以下方式解决了这个问题:

首先,我启用了对源映射的支持:Web Inspector - > settings - > General选项卡 - >选中"启用源映射".

然后我使用http://snugug.com/musings/debugging-sass-source-maps中的说明安装了Sass 3.3(它支持源地图):

跑

gem install sass --pre

检查

sass -v

至少拥有Sass 3.3.0.alpha.101,然后在编译文件时使用--sourcemap flag而不是--debug-info/ -gone.