google-chrome - Chrome开发者工具中的Sass/SCSS支持

Question

以前，直到最近(据我所知，直到Chrome 27)，Chrome开发工具都在Chrome实验的帮助下支持Sass(准确地说是SCSS)“检查”。

该支持表现为能够检查站点的CSS文件，以及是否使用--debug-info(SCSS 3.2.7)从SCSS编译了CSS，然后在CSS面板中进行了显示:

而不是CSS文件链接-您会看到相应的SCSS文件链接，您可以单击它，这将在准确的SCSS规则中的资源中打开文件，该规则有助于检查CSS规则(就像使用CSS文件一样) 。

出于任何原因，这已停止使用(我)最新的Chrome更新。

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

我不确定什么是正确的SE channel ，但由于它与开发有关-在这里

P.S. The paths SCSS generates seem to be correct, since in FireSASS they are shown and accessed correctly

在我尝试过的任何 channel 上都会发生相同的情况-发布，测试版，金丝雀

更新18.06.13

由于似乎旧的( --debug-info)时代已经过去，所以我将接受@electric_g回答为唯一的可能性。

Answer 1

我在Chrome Canary上遇到了相同的问题，并通过以下方式解决了该问题:

首先，我启用了对源 map 的支持:Web Inspector->设置->常规选项卡->选中“启用源 map ”。

然后我按照http://snugug.com/musings/debugging-sass-source-maps的说明安装了Sass 3.3(支持源 map ):

跑

gem install sass --pre

与...核对

sass -v

至少具有Sass 3.3.0.alpha.101
然后在编译文件时使用 --sourcemap flag而不是 --debug-info / -g一个。