Chromer Developer Tools中的Sass / SCSS支持

Question

之前，直到最近的时间（据我所知，直到Chrome 27），Chrome开发工具在Chrome实验的帮助下，支持Sass（SCSS准确）“检查”。

支持体现在能够检查站点的CSS文件以及CSS是否是使用--debug-info（SCSS 3.2.7）从SCSS编译的，然后在CSS面板中：

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

无论出于何种原因，这已停止使用（我的）最新Chrome更新。

这对我目前正在做的工作很重要（SCSS重组一个大型项目）所以我问：有没有人经历过同样的事情（我在所有可以访问的机器上都有它），更重要的是， 有没有人知道如何修复它（没有追查旧的Chrome版本）？

我不确定什么是合适的SE频道，但因为它与开发相关 - 这里是

  

P.S。 SCSS生成的路径似乎是正确的，因为在FireSASS中它们被正确显示和访问

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

更新18.06.13

由于似乎旧的（--debug-info）日已经过去，我将接受@electric_g回答作为唯一的可能性。

Answer 1

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

首先，我启用了对源地图的支持：Web Inspector - ＆gt;设置 - ＆gt;常规标签 - ＆gt;选中“启用源地图”。

然后我使用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 / -g。

Answer 2

如果其他人在此处结束，要在Chrome for Sass中使用源地图，您需要先使用--sourcemap标志生成它们！

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

更多信息：https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

--debug-info标志适用于FireSass。

Answer 3

您的Chrome可能存在更新错误。我点击右上角的菜单，然后点击关于谷歌浏览器，你会看到你的版本（应该是31+）。我显示旧版本和更新错误。

卸载Chrome，重新启动计算机，再次安装Chrome。

您应该拥有所有最新工具。 SASS支持在我的版本上不再具有实验性，默认情况下对我开启。但你可能需要打开它：

• 转到网址chrome：// flags，然后启用开发人员工具实验。
• 打开DevTools（右键单击网页Inspect Element）
• 点击右下方的齿轮图标
• 单击“实验”，然后单击“启用SASS支持”
• 单击“常规”，然后单击“启用CSS源地图”